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

MatMonthView requires the MAT_DATE_FORMATS token to format weekday/month labels. This dev-mode guard throws when the token has no provider. Typically the app also lacks a DateAdapter provider, since the recommended adapters register both tokens together.

Source

Thrown at src/material/datepicker/month-view.ts:227

  _previewEnd = signal<number | null>(null);

  /** Whether the user is currently selecting a range of dates. */
  _isRange = signal(false);

  /** The date of the month that today falls on. Null if today is in another month. */
  _todayDate = signal<number | null>(null);

  /** The names of the weekdays. */
  _weekdays = signal<{long: string; narrow: string; id: number}[]>([]);

  constructor() {
    inject(_CdkPrivateStyleLoader).load(_VisuallyHiddenLoader);
    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());
  }

  ngOnChanges(changes: SimpleChanges<this>) {
    const comparisonChange = changes['comparisonStart'] || changes['comparisonEnd'];

    if (comparisonChange && !comparisonChange.firstChange) {
      this._setRanges(this.selected);
    }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() (which registers both DateAdapter and MAT_DATE_FORMATS) to app config providers
2. If a custom DateAdapter is needed, also provide MAT_DATE_FORMATS: {provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS}
3. Prefer the official provider functions (provideDateFnsAdapter etc.) which wire both tokens atomically

Example fix

// before
{provide: DateAdapter, useClass: MyDateAdapter}
// after
{provide: DateAdapter, useClass: MyDateAdapter},
{provide: MAT_DATE_FORMATS, useValue: MY_NATIVE_DATE_FORMATS}

const formats = inject(MAT_DATE_FORMATS, {optional: true});
const adapter = inject(DateAdapter, {optional: true});
if (!adapter || !formats) throw new Error('Datepicker providers incomplete');

When it happens

Trigger: Rendering the month view (via mat-datepicker/mat-calendar) with a DateAdapter provided but no MAT_DATE_FORMATS provider — e.g. a custom DateAdapter supplied without MAT_DATE_FORMATS.

Common situations: Custom adapter implementations registered manually via {provide: DateAdapter, useClass: ...} without the matching formats; partial provider sets copied from old examples; overriding formats with useValue but removing the adapter provider.

Related errors

• 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 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/8a5a1760a2185864. Report an issue: GitHub.