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

MatMultiYearView displays a range of years and calls this._dateAdapter.today() in its constructor. The dev-mode check throws when no DateAdapter implementation is provided to the injector. Every datepicker view shares this requirement.

Source

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

  /** Emits when any date is activated. */
  @Output() readonly activeDateChange: EventEmitter<D> = new EventEmitter<D>();

  /** The body of calendar table */
  @ViewChild(MatCalendarBody) _matCalendarBody!: MatCalendarBody;

  /** Grid of calendar cells representing the currently displayed years. */
  _years = signal<MatCalendarCell[][]>([]);

  /** The year that today falls on. */
  _todayYear = signal(0);

  /** The year of the selected date. Null if the selected date is null. */
  _selectedYear = signal<number | null>(null);

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

    this._activeDate = this._dateAdapter.today();
  }

  ngAfterContentInit() {
    this._rerenderSubscription = this._dateAdapter.localeChanges
      .pipe(startWith(null))
      .subscribe(() => this._init());
  }

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

  /** Initializes this multi-year view. */
  _init() {
    this._todayYear.set(this._dateAdapter.getYear(this._dateAdapter.today()));

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() to the root providers in app.config.ts
2. Use provideDateFnsAdapter/provideLuxonDateAdapter/provideMomentDateAdapter for the corresponding date library
3. In tests, register the adapter provider via TestBed.configureTestingModule({providers: [provideNativeDateAdapter()]})

Example fix

// before
bootstrapApplication(AppComponent);
// after
bootstrapApplication(AppComponent, {
  providers: [provideNativeDateAdapter()],
});

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

When it happens

Trigger: Rendering the multi-year view (mat-year-picker or a calendar with multi-year view) without a DateAdapter provider in the injector chain.

Common situations: Apps using MatYearPicker/MatMultiYearView without provideNativeDateAdapter; isolated component environments or modals with their own injector; unit tests instantiating the view directly with no providers.

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/33ab8e4e56727e44. Report an issue: GitHub.