{"record":{"id":"707d775a23507b0c","repo":"angular/components","slug":"matdatepicker-no-provider-found-for-mat-date-form-707d77","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/datepicker-input-base.ts","lineNumber":254,"sourceCode":"  /** Converts a value from the model into a native value for the input. */\n  protected abstract _getValueFromModel(modelValue: S): D | null;\n\n  /** Combined form control validator for this input. */\n  protected abstract _validator: ValidatorFn | null;\n\n  /** Predicate that determines whether the input should handle a particular change event. */\n  protected abstract _shouldHandleChangeEvent(event: DateSelectionModelChange<S>): boolean;\n\n  /** Whether the last value set on the input was valid. */\n  protected _lastValueValid = false;\n\n  constructor() {\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    // Update the displayed date when the locale changes.\n    this._localeSubscription = this._dateAdapter.localeChanges.subscribe(() => {\n      this._assignValueProgrammatically(this.value, true);\n    });\n  }\n\n  ngAfterViewInit() {\n    this._isInitialized = true;\n  }\n\n  ngOnChanges(changes: SimpleChanges<this>) {\n    if (dateInputsHaveChanged(changes, this._dateAdapter)) {\n      this.stateChanges.next(undefined);\n    }\n  }","sourceCodeStart":236,"sourceCodeEnd":272,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/datepicker-input-base.ts#L236-L272","documentation":"The MatDatepicker input component injects the MAT_DATE_FORMATS injection token, which supplies parsing/formatting configuration for dates. Angular Material requires apps using the datepicker to provide both a DateAdapter implementation and MAT_DATE_FORMATS. This dev-mode check fires when the formats token has no provider, even if a DateAdapter is present.","triggerScenarios":"Rendering a mat-datepicker or mat-datepicker-input in an app (or lazy component environment) whose injector lacks a MAT_DATE_FORMATS provider — typically because provideNativeDateAdapter (or an equivalent) was never added to bootstrapApplication/appConfig providers.","commonSituations":"New Angular Material projects after the v17+ standalone API migration where provideNativeDateAdapter replaced the old providers: [MatDatepickerModule] module imports; standalone components importing MatDatepickerModule without adding providers; splitting datepicker components into lazy routes with isolated providers.","solutions":["Add provideNativeDateAdapter() to the app config providers: bootstrapApplication(AppComponent, {providers: [provideNativeDateAdapter()]})","If using date-fns/Luxon/Moment, add the matching provider: provideDateFnsAdapter(), provideLuxonDateAdapter(), provideMomentDateAdapter() (import from the corresponding @angular/material-*) package","Provide a custom MAT_DATE_FORMATS object alongside the adapter if default formats are insufficient","Verify the providers are on the root injector, not a component injector that doesn't cover the datepicker's injector chain"],"exampleFix":"// before\nbootstrapApplication(AppComponent);\n// after\nbootstrapApplication(AppComponent, {\n  providers: [provideNativeDateAdapter()],\n});","handlingStrategy":"validation","validationCode":"// app.config.ts check before rendering datepicker\nconst formats = inject(MAT_DATE_FORMATS, {optional: true});\nif (!formats) console.error('Add provideNativeDateAdapter() to app providers');","typeGuard":"function hasDateFormats(token: unknown): token is MatDateFormats {\n  return !!token && typeof token === 'object' && 'parse' in (token as any);\n}","tryCatchPattern":null,"preventionTips":["Always pair MatDatepickerModule imports with provideNativeDateAdapter() in app.config.ts","Centralize date providers in a shared config file for all standalone entry points","Include a smoke test that opens a datepicker to catch missing providers in CI"],"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"}