{"record":{"id":"f3083c89761004e7","repo":"angular/components","slug":"mattimepicker-incomplete-mat-date-formats-has-b","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"validation","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/timepicker/util.ts","lineNumber":135,"sourceCode":"        `to your app config: provideNativeDateAdapter, provideDateFnsAdapter, ` +\n        `provideLuxonDateAdapter, provideMomentDateAdapter, or provide a custom implementation.`,\n    );\n  }\n\n  if (!adapter) {\n    throw missingAdapterError('DateAdapter');\n  }\n\n  if (!formats) {\n    throw missingAdapterError('MAT_DATE_FORMATS');\n  }\n\n  if (\n    formats.display.timeInput === undefined ||\n    formats.display.timeOptionLabel === undefined ||\n    formats.parse.timeInput === undefined\n  ) {\n    throw new Error(\n      'MatTimepicker: Incomplete `MAT_DATE_FORMATS` has been provided. ' +\n        '`MAT_DATE_FORMATS` must provide `display.timeInput`, `display.timeOptionLabel` ' +\n        'and `parse.timeInput` formats in order to be compatible with MatTimepicker.',\n    );\n  }\n}\n","sourceCodeStart":117,"sourceCodeEnd":142,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/timepicker/util.ts#L117-L142","documentation":"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.","triggerScenarios":"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.","commonSituations":"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.","solutions":["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)","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: ...}]","Audit any custom MAT_DATE_FORMATS in app.config / module providers for the three required keys"],"exampleFix":"// before\nproviders: [\n  {provide: MAT_DATE_FORMATS, useValue: MY_DATEPICKER_FORMATS}, // no timeInput keys\n]\n\n// after\nimport {MAT_TIMEPICKER_FORMATS} or extend:\nproviders: [\n  {provide: MAT_DATE_FORMATS, useValue: {\n    ...MY_DATEPICKER_FORMATS,\n    display: {...MY_DATEPICKER_FORMATS.display, timeInput: {hour: 'numeric', minute: '2-digit'}, timeOptionLabel: {hour: 'numeric', minute: '2-digit'}},\n    parse: {...MY_DATEPICKER_FORMATS.parse, timeInput: 'HH:mm'},\n  }},\n]","handlingStrategy":"validation","validationCode":"import {MAT_DATE_FORMATS} from '@angular/material/core';\n\nfunction hasTimeFormats(formats: any): boolean {\n  return formats?.display?.timeInput !== undefined\n    && formats?.display?.timeOptionLabel !== undefined\n    && formats?.parse?.timeInput !== undefined;\n}\n// usage in app config test\nconst formats = injector.get(MAT_DATE_FORMATS);\nif (!hasTimeFormats(formats)) throw new Error('MAT_DATE_FORMATS missing timeInput formats');","typeGuard":"function isTimepickerCompatible(f: any): f is Required<Pick<TimepickerFormats, 'display' | 'parse'>> &\n  {display: {timeInput: unknown; timeOptionLabel: unknown}; parse: {timeInput: unknown}} {\n  return f?.display?.timeInput !== undefined\n    && f?.display?.timeOptionLabel !== undefined\n    && f?.parse?.timeInput !== undefined;\n}","tryCatchPattern":"try {\n  createComponent(MatTimepicker);\n} catch (e) {\n  if (String(e?.message).includes('Incomplete `MAT_DATE_FORMATS`')) {\n    TestBed.overrideProvider(MAT_DATE_FORMATS, {useValue: timepickerFormats});\n    fixture = TestBed.createComponent(Host);\n  }\n}","preventionTips":["Provide timepicker-specific MAT_DATE_FORMATS (with display.timeInput, display.timeOptionLabel, parse.timeInput)","Do not reuse datepicker-only format objects for MatTimepicker","Add a bootstrap-time assertion validating the provided formats","Document the required format keys wherever MAT_DATE_FORMATS is customized"],"tags":["angular-material","timepicker","configuration","date-formats","dependency-injection"],"backgroundTag":"incomplete-date-formats","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}