{"record":{"id":"33ab8e4e56727e44","repo":"angular/components","slug":"matdatepicker-no-provider-found-for-dateadapter-33ab8e","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/multi-year-view.ts","lineNumber":162,"sourceCode":"\n  /** Emits when any date is activated. */\n  @Output() readonly activeDateChange: EventEmitter<D> = new EventEmitter<D>();\n\n  /** The body of calendar table */\n  @ViewChild(MatCalendarBody) _matCalendarBody!: MatCalendarBody;\n\n  /** Grid of calendar cells representing the currently displayed years. */\n  _years = signal<MatCalendarCell[][]>([]);\n\n  /** The year that today falls on. */\n  _todayYear = signal(0);\n\n  /** The year of the selected date. Null if the selected date is null. */\n  _selectedYear = signal<number | null>(null);\n\n  constructor() {\n    if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw createMissingDateImplError('DateAdapter');\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  ngOnDestroy() {\n    this._rerenderSubscription.unsubscribe();\n  }\n\n  /** Initializes this multi-year view. */\n  _init() {\n    this._todayYear.set(this._dateAdapter.getYear(this._dateAdapter.today()));","sourceCodeStart":144,"sourceCodeEnd":180,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/multi-year-view.ts#L144-L180","documentation":"MatMultiYearView displays a range of years and calls this._dateAdapter.today() in its constructor. The dev-mode check throws when no DateAdapter implementation is provided to the injector. Every datepicker view shares this requirement.","triggerScenarios":"Rendering the multi-year view (mat-year-picker or a calendar with multi-year view) without a DateAdapter provider in the injector chain.","commonSituations":"Apps using MatYearPicker/MatMultiYearView without provideNativeDateAdapter; isolated component environments or modals with their own injector; unit tests instantiating the view directly with no providers.","solutions":["Add provideNativeDateAdapter() to the root providers in app.config.ts","Use provideDateFnsAdapter/provideLuxonDateAdapter/provideMomentDateAdapter for the corresponding date library","In tests, register the adapter provider via TestBed.configureTestingModule({providers: [provideNativeDateAdapter()]})"],"exampleFix":"// before\nbootstrapApplication(AppComponent);\n// after\nbootstrapApplication(AppComponent, {\n  providers: [provideNativeDateAdapter()],\n});","handlingStrategy":"validation","validationCode":"const adapter = inject(DateAdapter, {optional: true});\nif (!adapter) throw new Error('provideNativeDateAdapter() missing from providers');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Add provideNativeDateAdapter() in the root app config before using any calendar views","Verify tests provide the adapter via TestBed providers","Keep date provider setup in one shared module/config used by all routes"],"tags":["angular","material","datepicker","dependency-injection","configuration"],"backgroundTag":"missing-dateadapter-provider","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}