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

MatYearView also requires MAT_DATE_FORMATS to format month labels. This dev-mode guard throws when the token is unprovided, even if a DateAdapter exists. Provider functions like provideNativeDateAdapter register both tokens, so this usually indicates a hand-rolled provider set.

Source

Thrown at src/material/datepicker/year-view.ts:161

  /** The label for this year (e.g. "2017"). */
  _yearLabel = signal('');

  /** The month in this year that today falls on. Null if today is in a different year. */
  _todayMonth = signal<number | null>(null);

  /**
   * The month in this year that the selected Date falls on.
   * Null if the selected Date is in a different year.
   */
  _selectedMonth = signal<number | null>(null);

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

    this._activeDate = this._dateAdapter.today();
  }

  ngAfterContentInit() {
    this._rerenderSubscription = this._dateAdapter.localeChanges
      .pipe(startWith(null))
      .subscribe(() => this._init());
  }

  ngOnDestroy() {
    this._rerenderSubscription.unsubscribe();
  }

  /** Handles when a new month is selected. */
  _monthSelected(event: MatCalendarUserEvent<number>) {

View on GitHub (pinned to 0411926e7d)

Solutions

Add {provide: MAT_DATE_FORMATS, useValue: ...} (or rely on provideNativeDateAdapter which includes formats) to the providers
Replace manual provider tuples with the official provide*Adapter() functions that register both tokens
Audit providers on the injector that hosts the calendar to confirm both tokens are present

Example fix

// before
providers: [{provide: DateAdapter, useClass: NativeDateAdapter}]
// after
providers: [provideNativeDateAdapter()]

Defensive patterns

Strategy: validation

Validate before calling

const formats = inject(MAT_DATE_FORMATS, {optional: true});
if (!formats) throw new Error('Add MAT_DATE_FORMATS (e.g. via provideNativeDateAdapter())');

Prevention

Use provideNativeDateAdapter() rather than manual provider tuples
When overriding formats, keep the adapter provider intact
Review route/component-level providers that may shadow root providers

When it happens

Trigger: Rendering the year view with a custom or manual DateAdapter provider but no MAT_DATE_FORMATS provider in the same injector.

Common situations: Manual {provide: DateAdapter, useClass: ...} registrations copied from older docs; overriding MAT_DATE_FORMATS with a partial object removing it from providers; environments with isolated providers (route-level components).

Related errors

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