{"record":{"id":"28eab517d1569783","repo":"angular/components","slug":"matdatepicker-no-provider-found-for-mat-date-form","errorCode":null,"errorMessage":"MatDatepicker: No provider found for MAT_DATE_FORMATS. You must add one of the following to your app config: provideNativeDateAdapter, provideDateFnsAdapter, provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation.","messagePattern":"MatDatepicker: No provider found for MAT_DATE_FORMATS\\. You must add one of the following to your app config: provideNativeDateAdapter, provideDateFnsAdapter, provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/datepicker/calendar.ts","lineNumber":425,"sourceCode":"  }\n  private _currentView!: MatCalendarView;\n\n  /** Origin of active drag, or null when dragging is not active. */\n  protected _activeDrag: MatCalendarUserEvent<D> | null = null;\n\n  /**\n   * Emits whenever there is a state change that the header may need to respond to.\n   */\n  readonly stateChanges = new Subject<void>();\n\n  constructor() {\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this._dateAdapter) {\n        throw createMissingDateImplError('DateAdapter');\n      }\n\n      if (!this._dateFormats) {\n        throw createMissingDateImplError('MAT_DATE_FORMATS');\n      }\n    }\n\n    this._intlChanges = inject(MatDatepickerIntl).changes.subscribe(() => {\n      this._changeDetectorRef.markForCheck();\n      this.stateChanges.next();\n    });\n  }\n\n  ngAfterContentInit() {\n    this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);\n    this.activeDate = this.startAt || this._dateAdapter.today();\n\n    // Assign to the private property since we don't want to move focus on init.\n    this._currentView = this.startView;\n  }\n\n  ngAfterViewChecked() {","sourceCodeStart":407,"sourceCodeEnd":443,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/calendar.ts#L407-L443","documentation":"MatCalendar injects MAT_DATE_FORMATS, the multi-provider token that tells the DateAdapter how to parse/format/display dates. If the DateAdapter is present but MAT_DATE_FORMATS is not, the constructor throws in dev mode because the calendar cannot render dates in a consistent format.","triggerScenarios":"Providing a DateAdapter (e.g. provideNativeDateAdapter without its formats, or providing a custom DateAdapter class directly with useClass/useValue) without the matching MAT_DATE_FORMATS provider in the same injector.","commonSituations":"Custom DateAdapter implementations registered manually without also providing MAT_DATE_FORMATS; providing an adapter via useClass on a component while the formats token was expected from a module that was removed during a migration.","solutions":["Use provideNativeDateAdapter() (or the Moment/date-fns/Luxon equivalent) which registers both DateAdapter and MAT_DATE_FORMATS together.","If using a custom adapter, also provide MAT_DATE_FORMATS: {parse: {...}, display: {...}} alongside it.","Verify the formats token isn't shadowed: provide both tokens at the same injector level as the DateAdapter."],"exampleFix":"// before\nproviders: [{ provide: DateAdapter, useClass: MyDateAdapter }];\n\n// after\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\nproviders: [\n  { provide: DateAdapter, useClass: MyDateAdapter },\n  { provide: MAT_DATE_FORMATS, useValue: { parse: { dateInput: null }, display: { dateInput: { year: 'numeric', month: 'numeric', day: 'numeric' } } } }\n];","handlingStrategy":"validation","validationCode":"import { Injector, inject } from '@angular/core';\nimport { MAT_DATE_FORMATS } from '@angular/material/core';\nif (!inject(Injector).get(MAT_DATE_FORMATS, null)) {\n  throw new Error('Missing MAT_DATE_FORMATS: use provideNativeDateAdapter() or provide the token');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Never provide a DateAdapter without MAT_DATE_FORMATS at the same injector level.","Prefer provideNativeDateAdapter() which registers both tokens.","When writing custom adapters, export a single provide* function returning both providers."],"tags":["angular-material","datepicker","dependency-injection","missing-provider"],"backgroundTag":"missing-di-provider","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}