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

MatDateRangeInput injects the DateAdapter to coordinate parsing/formatting across its start and end inputs. If no DateAdapter is provided in its injector, the constructor throws in dev mode before any rendering happens.

Source

Thrown at src/material/datepicker/date-range-input.ts:266

  /**
   * Implemented as a part of `MatFormFieldControl`.
   * TODO(crisbeto): change type to `AbstractControlDirective` after #18206 lands.
   * @docs-private
   */
  ngControl: NgControl | null;

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

  /**
   * Disable the automatic labeling to avoid issues like #27241.
   * @docs-private
   */
  readonly disableAutomaticLabeling = true;

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

    // The datepicker module can be used both with MDC and non-MDC form fields. We have
    // to conditionally add the MDC input class so that the range picker looks correctly.
    if (this._formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {
      this._elementRef.nativeElement.classList.add(
        'mat-mdc-input-element',
        'mat-mdc-form-field-input-control',
        'mdc-text-field__input',
      );
    }

    // TODO(crisbeto): remove `as any` after #18206 lands.
    this.ngControl = inject(ControlContainer, {optional: true, self: true}) as any;
  }

  /**
   * Implemented as part of MatFormFieldControl.

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() to app.config.ts providers (or the component's providers).
2. Use the library-specific provider (provideMomentDateAdapter etc.) if your dates are Moment/date-fns/Luxon objects.
3. Check that no lazy/instantiated component is created outside the injector chain that contains the provider.

Example fix

// before
@Component({ imports: [MatDatepickerModule] })
export class RangeComponent {}

// after
@Component({ imports: [MatDatepickerModule], providers: [provideNativeDateAdapter()] })
export class RangeComponent {}

import { Injector, inject } from '@angular/core';
import { DateAdapter } from '@angular/material/core';
const adapter = inject(Injector).get(DateAdapter, null);
if (!adapter) throw new Error('mat-date-range-input needs provideNativeDateAdapter() in providers');

When it happens

Trigger: Rendering <mat-date-range-input> (or its MatDateRangePicker wrapper) without a DateAdapter provider from provideNativeDateAdapter()/provideMomentDateAdapter()/etc. in the app config or component providers.

Common situations: Same as 220 but specific to range pickers: standalone apps missing the adapter provider; feature modules that import MatDatepickerModule without the adapter; upgrades from v15+ where the default NativeDateModule re-export was removed.

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
• MatDatepicker: No provider found for DateAdapter. You must a
• MatTimepicker: Incomplete `MAT_DATE_FORMATS` has been provid

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