angular/components · error · Error

MatDatepicker: No provider found for DateAdapter. You must…

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.

Solutions

Add provideNativeDateAdapter() to the providers of the component using the datepicker or to app.config.ts providers.
If using Moment/date-fns/Luxon, call provideMomentDateAdapter()/provideDateFnsAdapter()/provideLuxonDateAdapter() instead (requires the corresponding @angular/material-xxx-adapter package).
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()]
};

Defensive patterns

Strategy: validation

Validate before calling

// 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');
  }
}

Prevention

Always pair MatDatepickerModule imports with provideNativeDateAdapter() in app.config.ts.
Use the provide*DateAdapter functions (not bare useClass) so formats come along automatically.
Add a smoke test that renders a datepicker in TestBed with the app's real 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

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

Appendix: 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)