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

MatDatepickerInput (base for single and range inputs) injects both DateAdapter and MAT_DATE_FORMATS. Without them it cannot parse user text into dates, so its constructor throws in dev mode — same family as errors 220/221/222 but raised from the input component.

Source

Thrown at src/material/datepicker/datepicker-input-base.ts:251

  /** Assigns a value to the input's model. */
  protected abstract _assignValueToModel(model: D | null): void;

  /** Converts a value from the model into a native value for the input. */
  protected abstract _getValueFromModel(modelValue: S): D | null;

  /** Combined form control validator for this input. */
  protected abstract _validator: ValidatorFn | null;

  /** Predicate that determines whether the input should handle a particular change event. */
  protected abstract _shouldHandleChangeEvent(event: DateSelectionModelChange<S>): boolean;

  /** Whether the last value set on the input was valid. */
  protected _lastValueValid = false;

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

    // Update the displayed date when the locale changes.
    this._localeSubscription = this._dateAdapter.localeChanges.subscribe(() => {
      this._assignValueProgrammatically(this.value, true);
    });
  }

  ngAfterViewInit() {
    this._isInitialized = true;
  }

  ngOnChanges(changes: SimpleChanges<this>) {
    if (dateInputsHaveChanged(changes, this._dateAdapter)) {

View on GitHub (pinned to 0411926e7d)

Solutions

1. Add provideNativeDateAdapter() to app.config.ts (or the component's) providers.
2. Use provideMomentDateAdapter()/provideDateFnsAdapter()/provideLuxonDateAdapter() if your form model uses those date types.
3. If formats are missing too (see error 221), prefer the combined provide*DateAdapter functions over manual DateAdapter-only providers.

Example fix

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

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

import { Injector, inject } from '@angular/core';
import { DateAdapter, MAT_DATE_FORMATS } from '@angular/material/core';
const inj = inject(Injector);
if (!inj.get(DateAdapter, null)) throw new Error('MatDatepickerInput: missing DateAdapter provider');
if (!inj.get(MAT_DATE_FORMATS, null)) throw new Error('MatDatepickerInput: missing MAT_DATE_FORMATS provider');

When it happens

Trigger: Rendering an input with [matDatepicker] (or [matStartDate]/[matEndDate]) without a DateAdapter provider in the injector tree.

Common situations: Standalone apps that added MatDatepickerModule/MatFormFieldModule but never provideNativeDateAdapter; per-component provider scoped only to the component hosting the toggle, not the input; migration from NgModule-based setup where NativeDateModule re-exports were 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
• 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/9493111664094ab8. Report an issue: GitHub.