{"record":{"id":"fb9933358cb708b7","repo":"angular/components","slug":"matdatepicker-no-provider-found-for-dateadapter-fb9933","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/datepicker-base.ts","lineNumber":552,"sourceCode":"  private _focusedElementBeforeOpen: HTMLElement | null = null;\n\n  /** Unique class that will be added to the backdrop so that the test harnesses can look it up. */\n  private _backdropHarnessClass = `${this.id}-backdrop`;\n\n  /** Currently-registered actions portal. */\n  private _actionsPortal: TemplatePortal | null = null;\n\n  /** The input element this datepicker is associated with. */\n  datepickerInput!: C;\n\n  /** Emits when the datepicker's state changes. */\n  readonly stateChanges = new Subject<void>();\n\n  private readonly _changeDetectorRef = inject(ChangeDetectorRef);\n\n  constructor() {\n    if (!this._dateAdapter && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n      throw createMissingDateImplError('DateAdapter');\n    }\n\n    this._model.selectionChanged.subscribe(() => {\n      this._changeDetectorRef.markForCheck();\n    });\n  }\n\n  ngOnChanges(changes: SimpleChanges<this>) {\n    const positionChange = changes['xPosition'] || changes['yPosition'];\n\n    if (positionChange && !positionChange.firstChange && this._overlayRef) {\n      const positionStrategy = this._overlayRef.getConfig().positionStrategy;\n\n      if (positionStrategy instanceof FlexibleConnectedPositionStrategy) {\n        this._setConnectedPositions(positionStrategy);\n\n        if (this.opened) {\n          this._overlayRef.updatePosition();","sourceCodeStart":534,"sourceCodeEnd":570,"githubUrl":"https://github.com/angular/components/blob/0411926e7d8ae06b32236ec1048a888cfad5abf2/src/material/datepicker/datepicker-base.ts#L534-L570","documentation":"MatDatepicker (and MatDateRangePicker), the trigger components, inject DateAdapter to compute initial views and handle selection. Without a DateAdapter provider the constructor throws in dev mode before the picker can open.","triggerScenarios":"Placing <mat-datepicker> or <mat-datepicker-toggle> in a template without any DateAdapter provider anywhere in the injector tree, regardless of whether the input itself has one.","commonSituations":"Picker and toggle added to a different component than the input, where the adapter provider was scoped to the input's component only; apps missing the provider entirely after migrating to standalone APIs.","solutions":["Add provideNativeDateAdapter() (or the adapter matching your date library) to app.config.ts providers so it is visible app-wide.","If scoped per-component, add the provider to every component that hosts a datepicker, input, or range picker.","Prefer root-level providers to avoid per-component injector gaps."],"exampleFix":"// before\nproviders: [MatDatepickerModule];\n\n// after\nimport { provideNativeDateAdapter } from '@angular/material/core';\nproviders: [MatDatepickerModule, provideNativeDateAdapter()];","handlingStrategy":"validation","validationCode":"import { Injector, inject } from '@angular/core';\nimport { DateAdapter } from '@angular/material/core';\nif (!inject(Injector).get(DateAdapter, null)) {\n  throw new Error('Datepicker requires a DateAdapter provider (e.g. provideNativeDateAdapter())');\n}","typeGuard":null,"tryCatchPattern":null,"preventionTips":["Provide the adapter at root level so inputs, pickers, and toggles all resolve it.","Add the adapter provider to your app scaffold/boilerplate snippet.","Test every component containing a datepicker with the production providers."],"tags":["angular-material","datepicker","dependency-injection","missing-provider"],"backgroundTag":"missing-di-provider","analyzedSha":"0411926e7d8ae06b32236ec1048a888cfad5abf2","analyzedAt":"2026-08-31T11:58:23.400Z","schemaVersion":2},"datasetVersion":"2026-08-31T14:17:45.589Z"}