angular/components · error · Error

MatDatepicker: No provider found for DateAdapter. You must a

Error message

MatDatepicker: No provider found for DateAdapter. You must add one of the following to your app config: provideNativeDateAdapter, provideDateFnsAdapter, provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation.

What it means

The MatCalendar component injects DateAdapter (the abstraction over a concrete date library) and MAT_DATE_FORMATS. If no DateAdapter provider exists in the injector, the constructor throws in dev mode because the calendar cannot create, parse, or compare dates. Angular Material ships several adapters (native, date-fns, Luxon, Moment) but none is enabled by default.

Source

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

    if (viewChangedResult) {
      this.stateChanges.next();
      this.viewChanged.emit(viewChangedResult);
    }
  }
  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.

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() to the providers of the component using the datepicker or to app.config.ts providers.
2. If using Moment/date-fns/Luxon, call provideMomentDateAdapter()/provideDateFnsAdapter()/provideLuxonDateAdapter() instead (requires the corresponding @angular/material-xxx-adapter package).
3. Ensure the provider is in the injector path of the component (e.g. a lazy component still sees root-level providers; if providing per-feature, put it on the parent route/component).

Example fix

// before (app.config.ts)
export const appConfig: ApplicationConfig = {
  providers: [provideAnimations()]
};

// after
import { provideNativeDateAdapter } from '@angular/material/core';
export const appConfig: ApplicationConfig = {
  providers: [provideAnimations(), provideNativeDateAdapter()]
};

// app.config.ts — fail fast if adapter missing before any datepicker renders
import { Injector, inject } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
export function assertDateAdapter(): void {
  if (!inject(Injector).get(DateAdapter, null)) {
    throw new Error('Missing DateAdapter: add provideNativeDateAdapter() to providers');
  }
}

When it happens

Trigger: Rendering any MatDatepicker/MatDateRangePicker/MatCalendar component without calling provideNativeDateAdapter() (or an equivalent provider) in the app config or a standalone component's providers.

Common situations: Standalone-component apps that imported MatDatepickerModule but never added a date adapter to providers; apps migrated from NgModule imports (which previously re-exported NativeDateModule) to the new provider API; lazy-loaded feature components where the adapter was provided only in the root but not visible to the component injector.

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