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

MatDatepicker (and MatDateRangePicker), the trigger components, inject DateAdapter to compute initial views and handle selection. Without a DateAdapter provider the constructor throws in dev mode before the picker can open.

Source

Thrown at src/material/datepicker/datepicker-base.ts:552

  private _focusedElementBeforeOpen: HTMLElement | null = null;

  /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */
  private _backdropHarnessClass = `${this.id}-backdrop`;

  /** Currently-registered actions portal. */
  private _actionsPortal: TemplatePortal | null = null;

  /** The input element this datepicker is associated with. */
  datepickerInput!: C;

  /** Emits when the datepicker's state changes. */
  readonly stateChanges = new Subject<void>();

  private readonly _changeDetectorRef = inject(ChangeDetectorRef);

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

    this._model.selectionChanged.subscribe(() => {
      this._changeDetectorRef.markForCheck();
    });
  }

  ngOnChanges(changes: SimpleChanges<this>) {
    const positionChange = changes['xPosition'] || changes['yPosition'];

    if (positionChange && !positionChange.firstChange && this._overlayRef) {
      const positionStrategy = this._overlayRef.getConfig().positionStrategy;

      if (positionStrategy instanceof FlexibleConnectedPositionStrategy) {
        this._setConnectedPositions(positionStrategy);

        if (this.opened) {
          this._overlayRef.updatePosition();

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() (or the adapter matching your date library) to app.config.ts providers so it is visible app-wide.
2. If scoped per-component, add the provider to every component that hosts a datepicker, input, or range picker.
3. Prefer root-level providers to avoid per-component injector gaps.

Example fix

// before
providers: [MatDatepickerModule];

// after
import { provideNativeDateAdapter } from '@angular/material/core';
providers: [MatDatepickerModule, provideNativeDateAdapter()];

import { Injector, inject } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
if (!inject(Injector).get(DateAdapter, null)) {
  throw new Error('Datepicker requires a DateAdapter provider (e.g. provideNativeDateAdapter())');
}

When it happens

Trigger: Placing <mat-datepicker> or <mat-datepicker-toggle> in a template without any DateAdapter provider anywhere in the injector tree, regardless of whether the input itself has one.

Common situations: Picker and toggle added to a different component than the input, where the adapter provider was scoped to the input's component only; apps missing the provider entirely after migrating to standalone APIs.

Related errors

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