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

MatMonthView renders a month grid and injects DateAdapter for date math and MAT_DATE_FORMATS for labels. Without a DateAdapter provider in the injector, the component throws this dev-mode error at construction. The DateAdapter is the abstraction over the chosen date library (native Date, date-fns, Luxon, Moment).

Source

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

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

  /** End of the preview range. */
  _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'];

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() to the root app config providers array
2. Use a library-specific adapter provider (provideDateFnsAdapter/provideLuxonDateAdapter/provideMomentDateAdapter) if the app standardizes on that date library
3. In tests, add provideNativeDateAdapter() to TestBed.configureTestingModule providers
4. Ensure providers are at the injector level that ancestors of the calendar view (not just a sibling component)

Example fix

// before
providers: [MatDatepickerModule]
// after
providers: [provideNativeDateAdapter()] // in appConfig providers

const adapter = inject(DateAdapter, {optional: true});
if (!adapter) throw new Error('Register provideNativeDateAdapter() in app providers');

try {
  this._dateAdapter.today();
} catch (e) {
  console.error('DateAdapter missing: add provideNativeDateAdapter() to providers', e);
}

When it happens

Trigger: Instantiating mat-month-view (directly or as part of mat-calendar/datepicker) when the current injector has no DateAdapter provider — e.g. app config lacks provideNativeDateAdapter or an equivalent provider.

Common situations: Standalone apps that import MatDatepickerModule but never call provideNativeDateAdapter(); tests that instantiate MatMonthView without TestBed providers; Angular upgrades where DateAdapter providers from a shared module were dropped.

Related errors

• MatDatepicker: No provider found for MAT_DATE_FORMATS. You m
• 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 MAT_DATE_FORMATS. You m

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