angular/components · error · Error

MatTimepicker: Incomplete `MAT_DATE_FORMATS` has been provid

Error message

MatTimepicker: Incomplete `MAT_DATE_FORMATS` has been provided. `MAT_DATE_FORMATS` must provide `display.timeInput`, `display.timeOptionLabel` and `parse.timeInput` formats in order to be compatible with MatTimepicker.

What it means

validateAdapter checks the injected MAT_DATE_FORMATS at timepicker construction and requires the date adapter's formats to include display.timeInput, display.timeOptionLabel and parse.timeInput. A generic MAT_DATE_FORMATS (e.g. the default for date pickers) lacks these time-specific formats, so the timepicker cannot format or parse values and throws.

Source

Thrown at src/material/timepicker/util.ts:135

        `to your app config: provideNativeDateAdapter, provideDateFnsAdapter, ` +
        `provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation.`,
    );
  }

  if (!adapter) {
    throw missingAdapterError('DateAdapter');
  }

  if (!formats) {
    throw missingAdapterError('MAT_DATE_FORMATS');
  }

  if (
    formats.display.timeInput === undefined ||
    formats.display.timeOptionLabel === undefined ||
    formats.parse.timeInput === undefined
  ) {
    throw new Error(
      'MatTimepicker: Incomplete `MAT_DATE_FORMATS` has been provided. ' +
        '`MAT_DATE_FORMATS` must provide `display.timeInput`, `display.timeOptionLabel` ' +
        'and `parse.timeInput` formats in order to be compatible with MatTimepicker.',
    );
  }
}

View on GitHub (pinned to 0411926e7d)

Solutions

1. Provide a MAT_DATE_FORMATS that includes display.timeInput, display.timeOptionLabel and parse.timeInput (e.g. use the format set exported for timepicker, or extend your existing formats object with these keys)
2. If using the default adapter stack, import and provide the timepicker-compatible formats (e.g. from @angular/material/timepicker) via providers: [{provide: MAT_DATE_FORMATS, useValue: ...}]
3. Audit any custom MAT_DATE_FORMATS in app.config / module providers for the three required keys

Example fix

// before
providers: [
  {provide: MAT_DATE_FORMATS, useValue: MY_DATEPICKER_FORMATS}, // no timeInput keys
]

// after
import {MAT_TIMEPICKER_FORMATS} or extend:
providers: [
  {provide: MAT_DATE_FORMATS, useValue: {
    ...MY_DATEPICKER_FORMATS,
    display: {...MY_DATEPICKER_FORMATS.display, timeInput: {hour: 'numeric', minute: '2-digit'}, timeOptionLabel: {hour: 'numeric', minute: '2-digit'}},
    parse: {...MY_DATEPICKER_FORMATS.parse, timeInput: 'HH:mm'},
  }},
]

import {MAT_DATE_FORMATS} from '@angular/material/core';

function hasTimeFormats(formats: any): boolean {
  return formats?.display?.timeInput !== undefined
    && formats?.display?.timeOptionLabel !== undefined
    && formats?.parse?.timeInput !== undefined;
}
// usage in app config test
const formats = injector.get(MAT_DATE_FORMATS);
if (!hasTimeFormats(formats)) throw new Error('MAT_DATE_FORMATS missing timeInput formats');

function isTimepickerCompatible(f: any): f is Required<Pick<TimepickerFormats, 'display' | 'parse'>> &
  {display: {timeInput: unknown; timeOptionLabel: unknown}; parse: {timeInput: unknown}} {
  return f?.display?.timeInput !== undefined
    && f?.display?.timeOptionLabel !== undefined
    && f?.parse?.timeInput !== undefined;
}

try {
  createComponent(MatTimepicker);
} catch (e) {
  if (String(e?.message).includes('Incomplete `MAT_DATE_FORMATS`')) {
    TestBed.overrideProvider(MAT_DATE_FORMATS, {useValue: timepickerFormats});
    fixture = TestBed.createComponent(Host);
  }
}

When it happens

Trigger: Using MatTimepicker with the default MAT_DATE_FORMATS provider instead of MAT_NATIVE_DATE_FORMATS/MAT_MOMENT_DATE_ADAPTER_OPTIONS extended with timeInput/timeOptionLabel formats.

Common situations: Apps that already configured MAT_DATE_FORMATS for mat-datepicker and reuse it for timepicker; forgetting to provide the timepicker-specific format extensions when overriding the adapter; upgrading Material to a version that introduced timeInput formats.

Related errors

• Unable to retrieve options for timepicker. Timepicker panel
• Cannot specify both the `options` and `interval` inputs at t
• Value of `options` input cannot be an empty array
• MatTimepicker can only be registered with one input at a tim
• MatSelectionColumn: missing MatSelection in the parent

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