{"record":{"id":"377ab2ec3b50f6fb","repo":"angular/components","slug":"matdatepicker-no-provider-found-for-dateadapter-377ab2","errorCode":null,"errorMessage":"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.","messagePattern":"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\\.","errorType":"exception","errorClass":"Error","httpStatus":null,"severity":"error","filePath":"src/material/datepicker/date-range-input.ts","lineNumber":266,"sourceCode":"  /**\n   * Implemented as a part of `MatFormFieldControl`.\n   * TODO(crisbeto): change type to `AbstractControlDirective` after #18206 lands.\n   * @docs-private\n   */\n  ngControl: NgControl | null;\n\n  /** Emits when the input's state has changed. */\n  readonly stateChanges = new Subject<void>();\n\n  /**\n   * Disable the automatic labeling to avoid issues like #27241.\n   * @docs-private\n   */\n  readonly disableAutomaticLabeling = true;\n\n  constructor() {\n    if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw createMissingDateImplError('DateAdapter');\n    }\n\n    // The datepicker module can be used both with MDC and non-MDC form fields. We have\n    // to conditionally add the MDC input class so that the range picker looks correctly.\n    if (this._formField?._elementRef.nativeElement.classList.contains('mat-mdc-form-field')) {\n      this._elementRef.nativeElement.classList.add(\n        'mat-mdc-input-element',\n        'mat-mdc-form-field-input-control',\n        'mdc-text-field__input',\n      );\n    }\n\n    // TODO(crisbeto): remove `as any` after #18206 lands.\n    this.ngControl = inject(ControlContainer, {optional: true, self: true}) as any;\n  }\n\n  /**\n   * Implemented as part of MatFormFieldControl.","sourceCodeStart":248,"sourceCodeEnd":284,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/date-range-input.ts#L248-L284","documentation":"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.","triggerScenarios":"Rendering <mat-date-range-input> (or its MatDateRangePicker wrapper) without a DateAdapter provider from provideNativeDateAdapter()/provideMomentDateAdapter()/etc. in the app config or component providers.","commonSituations":"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.","solutions":["Add provideNativeDateAdapter() to app.config.ts providers (or the component's providers).","Use the library-specific provider (provideMomentDateAdapter etc.) if your dates are Moment/date-fns/Luxon objects.","Check that no lazy/instantiated component is created outside the injector chain that contains the provider."],"exampleFix":"// before\n@Component({ imports: [MatDatepickerModule] })\nexport class RangeComponent {}\n\n// after\n@Component({ imports: [MatDatepickerModule], providers: [provideNativeDateAdapter()] })\nexport class RangeComponent {}","handlingStrategy":"validation","validationCode":"import { Injector, inject } from '@angular/core';\nimport { DateAdapter } from '@angular/material/core';\nconst adapter = inject(Injector).get(DateAdapter, null);\nif (!adapter) throw new Error('mat-date-range-input needs provideNativeDateAdapter() in providers');","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Put the date adapter in root providers so all range inputs see it.","Include a datepicker smoke test in CI for components containing range inputs.","When scaffolding range pickers, copy the providers list together with the module imports."],"tags":["angular-material","datepicker","date-range-input","dependency-injection"],"backgroundTag":"missing-di-provider","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}