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

MatCalendar injects MAT_DATE_FORMATS, the multi-provider token that tells the DateAdapter how to parse/format/display dates. If the DateAdapter is present but MAT_DATE_FORMATS is not, the constructor throws in dev mode because the calendar cannot render dates in a consistent format.

Source

Thrown at src/material/datepicker/calendar.ts:425

  }
  private _currentView!: MatCalendarView;

  /** Origin of active drag, or null when dragging is not active. */
  protected _activeDrag: MatCalendarUserEvent<D> | null = null;

  /**
   * Emits whenever there is a state change that the header may need to respond to.
   */
  readonly stateChanges = new Subject<void>();

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

      if (!this._dateFormats) {
        throw createMissingDateImplError('MAT_DATE_FORMATS');
      }
    }

    this._intlChanges = inject(MatDatepickerIntl).changes.subscribe(() => {
      this._changeDetectorRef.markForCheck();
      this.stateChanges.next();
    });
  }

  ngAfterContentInit() {
    this._calendarHeaderPortal = new ComponentPortal(this.headerComponent || MatCalendarHeader);
    this.activeDate = this.startAt || this._dateAdapter.today();

    // Assign to the private property since we don't want to move focus on init.
    this._currentView = this.startView;
  }

  ngAfterViewChecked() {

View on GitHub (pinned to 0411926e7d)

Solutions

1. Use provideNativeDateAdapter() (or the Moment/date-fns/Luxon equivalent) which registers both DateAdapter and MAT_DATE_FORMATS together.
2. If using a custom adapter, also provide MAT_DATE_FORMATS: {parse: {...}, display: {...}} alongside it.
3. Verify the formats token isn't shadowed: provide both tokens at the same injector level as the DateAdapter.

Example fix

// before
providers: [{ provide: DateAdapter, useClass: MyDateAdapter }];

// after
import { MAT_DATE_FORMATS } from '@angular/material/core';
providers: [
  { provide: DateAdapter, useClass: MyDateAdapter },
  { provide: MAT_DATE_FORMATS, useValue: { parse: { dateInput: null }, display: { dateInput: { year: 'numeric', month: 'numeric', day: 'numeric' } } } }
];

import { Injector, inject } from '@angular/core';
import { MAT_DATE_FORMATS } from '@angular/material/core';
if (!inject(Injector).get(MAT_DATE_FORMATS, null)) {
  throw new Error('Missing MAT_DATE_FORMATS: use provideNativeDateAdapter() or provide the token');
}

When it happens

Trigger: Providing a DateAdapter (e.g. provideNativeDateAdapter without its formats, or providing a custom DateAdapter class directly with useClass/useValue) without the matching MAT_DATE_FORMATS provider in the same injector.

Common situations: Custom DateAdapter implementations registered manually without also providing MAT_DATE_FORMATS; providing an adapter via useClass on a component while the formats token was expected from a module that was removed during a migration.

Related errors

• 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
• MatSelectionColumn: missing MatSelection in the parent
• MatDatepicker: No provider found for DateAdapter. You must a

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