angular/components · error · Error

MatDatepicker: No provider found for MAT_DATE_FORMATS. You m

Error message

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.

What it means

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.

Source

Thrown at src/material/datepicker/datepicker-input-base.ts:254

  /** Converts a value from the model into a native value for the input. */
  protected abstract _getValueFromModel(modelValue: S): D | null;

  /** Combined form control validator for this input. */
  protected abstract _validator: ValidatorFn | null;

  /** Predicate that determines whether the input should handle a particular change event. */
  protected abstract _shouldHandleChangeEvent(event: DateSelectionModelChange<S>): boolean;

  /** Whether the last value set on the input was valid. */
  protected _lastValueValid = false;

  constructor() {
    if (typeof ngDevMode === 'undefined' || ngDevMode) {
      if (!this._dateAdapter) {
        throw createMissingDateImplError('DateAdapter');
      }
      if (!this._dateFormats) {
        throw createMissingDateImplError('MAT_DATE_FORMATS');
      }
    }

    // Update the displayed date when the locale changes.
    this._localeSubscription = this._dateAdapter.localeChanges.subscribe(() => {
      this._assignValueProgrammatically(this.value, true);
    });
  }

  ngAfterViewInit() {
    this._isInitialized = true;
  }

  ngOnChanges(changes: SimpleChanges<this>) {
    if (dateInputsHaveChanged(changes, this._dateAdapter)) {
      this.stateChanges.next(undefined);
    }
  }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() to the app config providers: bootstrapApplication(AppComponent, {providers: [provideNativeDateAdapter()]})
2. If using date-fns/Luxon/Moment, add the matching provider: provideDateFnsAdapter(), provideLuxonDateAdapter(), provideMomentDateAdapter() (import from the corresponding @angular/material-*) package
3. Provide a custom MAT_DATE_FORMATS object alongside the adapter if default formats are insufficient
4. Verify the providers are on the root injector, not a component injector that doesn't cover the datepicker's injector chain

Example fix

// before
bootstrapApplication(AppComponent);
// after
bootstrapApplication(AppComponent, {
  providers: [provideNativeDateAdapter()],
});

// app.config.ts check before rendering datepicker
const formats = inject(MAT_DATE_FORMATS, {optional: true});
if (!formats) console.error('Add provideNativeDateAdapter() to app providers');

function hasDateFormats(token: unknown): token is MatDateFormats {
  return !!token && typeof token === 'object' && 'parse' in (token as any);
}

When it happens

Trigger: 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.

Common situations: 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.

Related errors

• MatDatepicker: No provider found for DateAdapter. You must a
• MatDatepicker: No provider found for MAT_DATE_FORMATS. You m
• MatDatepicker: No provider found for DateAdapter. You must a
• MatDatepicker: No provider found for DateAdapter. You must a
• MatDatepicker: No provider found for MAT_DATE_FORMATS. You m

AI-assisted analysis of angular/components@0411926e7d (2026-08-31). Data as JSON: /api/errors/707d775a23507b0c. Report an issue: GitHub.