{"record":{"id":"f33e268305e4e2cd","repo":"angular/components","slug":"matdatepicker-no-provider-found-for-dateadapter-f33e26","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/month-view.ts","lineNumber":224,"sourceCode":"  _previewStart = signal<number | null>(null);\n\n  /** End of the preview range. */\n  _previewEnd = signal<number | null>(null);\n\n  /** Whether the user is currently selecting a range of dates. */\n  _isRange = signal(false);\n\n  /** The date of the month that today falls on. Null if today is in another month. */\n  _todayDate = signal<number | null>(null);\n\n  /** The names of the weekdays. */\n  _weekdays = signal<{long: string; narrow: string; id: number}[]>([]);\n\n  constructor() {\n    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);\n    if (typeof ngDevMode === 'undefined' || ngDevMode) {\n      if (!this._dateAdapter) {\n        throw createMissingDateImplError('DateAdapter');\n      }\n      if (!this._dateFormats) {\n        throw createMissingDateImplError('MAT_DATE_FORMATS');\n      }\n    }\n\n    this._activeDate = this._dateAdapter.today();\n  }\n\n  ngAfterContentInit() {\n    this._rerenderSubscription = this._dateAdapter.localeChanges\n      .pipe(startWith(null))\n      .subscribe(() => this._init());\n  }\n\n  ngOnChanges(changes: SimpleChanges<this>) {\n    const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];\n","sourceCodeStart":206,"sourceCodeEnd":242,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/month-view.ts#L206-L242","documentation":"MatMonthView renders a month grid and injects DateAdapter for date math and MAT_DATE_FORMATS for labels. Without a DateAdapter provider in the injector, the component throws this dev-mode error at construction. The DateAdapter is the abstraction over the chosen date library (native Date, date-fns, Luxon, Moment).","triggerScenarios":"Instantiating mat-month-view (directly or as part of mat-calendar/datepicker) when the current injector has no DateAdapter provider — e.g. app config lacks provideNativeDateAdapter or an equivalent provider.","commonSituations":"Standalone apps that import MatDatepickerModule but never call provideNativeDateAdapter(); tests that instantiate MatMonthView without TestBed providers; Angular upgrades where DateAdapter providers from a shared module were dropped.","solutions":["Add provideNativeDateAdapter() to the root app config providers array","Use a library-specific adapter provider (provideDateFnsAdapter/provideLuxonDateAdapter/provideMomentDateAdapter) if the app standardizes on that date library","In tests, add provideNativeDateAdapter() to TestBed.configureTestingModule providers","Ensure providers are at the injector level that ancestors of the calendar view (not just a sibling component)"],"exampleFix":"// before\nproviders: [MatDatepickerModule]\n// after\nproviders: [provideNativeDateAdapter()] // in appConfig providers","handlingStrategy":"validation","validationCode":"const adapter = inject(DateAdapter, {optional: true});\nif (!adapter) throw new Error('Register provideNativeDateAdapter() in app providers');","typeGuard":null,"tryCatchPattern":"try {\n  this._dateAdapter.today();\n} catch (e) {\n  console.error('DateAdapter missing: add provideNativeDateAdapter() to providers', e);\n}","preventionTips":["Register adapter providers at the root injector so all calendar views inherit them","Use official provide*Adapter() functions instead of manual class providers","Add datepicker rendering to integration tests"],"tags":["angular","material","datepicker","dependency-injection","configuration"],"backgroundTag":"missing-dateadapter-provider","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-09-01T08:17:40.651Z"}