angular/components · 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

MatYearView renders a 12-month grid and injects DateAdapter plus MAT_DATE_FORMATS. The dev-mode guard throws when no DateAdapter provider exists in the injector. It's the year-level counterpart of the month/multi-year view checks.

Source

Thrown at src/material/datepicker/year-view.ts:158

  /** Grid of calendar cells representing the months of the year. */
  _months = signal<MatCalendarCell[][]>([]);

  /** The label for this year (e.g. "2017"). */
  _yearLabel = signal('');

  /** The month in this year that today falls on. Null if today is in a different year. */
  _todayMonth = signal<number | null>(null);

  /**
   * The month in this year that the selected Date falls on.
   * Null if the selected Date is in a different year.
   */
  _selectedMonth = signal<number | null>(null);

  constructor() {
    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());
  }

  ngOnDestroy() {
    this._rerenderSubscription.unsubscribe();
  }

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() to the application's root providers
2. Use the library-specific provider (provideDateFnsAdapter/provideLuxonDateAdapter/provideMomentDateAdapter) as appropriate
3. In tests add the provider to TestBed.configureTestingModule

Example fix

// before
TestBed.configureTestingModule({imports: [MatDatepickerModule]})
// after
TestBed.configureTestingModule({imports: [MatDatepickerModule], providers: [provideNativeDateAdapter()]})

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

When it happens

Trigger: Rendering the year view (via mat-calendar in year mode or mat-year-picker) when the injector lacks a DateAdapter provider.

Common situations: Standalone apps missing provideNativeDateAdapter; test benches constructing MatYearView without providers; provider removal during refactors to standalone components.

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 MAT_DATE_FORMATS. You m
• 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/efac8086e8430e30. Report an issue: GitHub.