{"record":{"id":"6ef69ca6ba7bb1fe","repo":"angular/components","slug":"matdatepicker-no-provider-found-for-dateadapter","errorCode":null,"errorMessage":"MatDatepicker: No provider found for DateAdapter. 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 DateAdapter\\. 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":421,"sourceCode":"    if (viewChangedResult) {\n      this.stateChanges.next();\n      this.viewChanged.emit(viewChangedResult);\n    }\n  }\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.","sourceCodeStart":403,"sourceCodeEnd":439,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/calendar.ts#L403-L439","documentation":"The MatCalendar component injects DateAdapter (the abstraction over a concrete date library) and MAT_DATE_FORMATS. If no DateAdapter provider exists in the injector, the constructor throws in dev mode because the calendar cannot create, parse, or compare dates. Angular Material ships several adapters (native, date-fns, Luxon, Moment) but none is enabled by default.","triggerScenarios":"Rendering any MatDatepicker/MatDateRangePicker/MatCalendar component without calling provideNativeDateAdapter() (or an equivalent provider) in the app config or a standalone component's providers.","commonSituations":"Standalone-component apps that imported MatDatepickerModule but never added a date adapter to providers; apps migrated from NgModule imports (which previously re-exported NativeDateModule) to the new provider API; lazy-loaded feature components where the adapter was provided only in the root but not visible to the component injector.","solutions":["Add provideNativeDateAdapter() to the providers of the component using the datepicker or to app.config.ts providers.","If using Moment/date-fns/Luxon, call provideMomentDateAdapter()/provideDateFnsAdapter()/provideLuxonDateAdapter() instead (requires the corresponding @angular/material-xxx-adapter package).","Ensure the provider is in the injector path of the component (e.g. a lazy component still sees root-level providers; if providing per-feature, put it on the parent route/component)."],"exampleFix":"// before (app.config.ts)\nexport const appConfig: ApplicationConfig = {\n  providers: [provideAnimations()]\n};\n\n// after\nimport { provideNativeDateAdapter } from '@angular/material/core';\nexport const appConfig: ApplicationConfig = {\n  providers: [provideAnimations(), provideNativeDateAdapter()]\n};","handlingStrategy":"validation","validationCode":"// app.config.ts — fail fast if adapter missing before any datepicker renders\nimport { Injector, inject } from '@angular/core';\nimport { DateAdapter } from '@angular/material/core';\nexport function assertDateAdapter(): void {\n  if (!inject(Injector).get(DateAdapter, null)) {\n    throw new Error('Missing DateAdapter: add provideNativeDateAdapter() to providers');\n  }\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Always pair MatDatepickerModule imports with provideNativeDateAdapter() in app.config.ts.","Use the provide*DateAdapter functions (not bare useClass) so formats come along automatically.","Add a smoke test that renders a datepicker in TestBed with the app's real 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"}