bug(angular material datepicker): datepicker throws an NullInjectorError: No provider for DateAdapter! that is not documented in any example

[MichalZonis]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

13.0.0

Description

I want to use angular material datepicker for date range selection in my application. This worked just in previous versions I used to work with.
I follow the documentation and yet the following error rises:
create-trip.component.html:10 ERROR NullInjectorError: R3InjectorError(Standalone[_HomeComponent])[DateAdapter -> DateAdapter -> DateAdapter -> DateAdapter]:
NullInjectorError: No provider for DateAdapter!

The datepicker is located inside an angular material dialog component, which is opened from the HomeComponent that is mentioned in the error. I tried to provide 'NativeDateAdapter' in both the dialog component and the home component but it didn't help.

Just to clarify, the calendar doesn't open and I can't choose dates.

Reproduction

StackBlitz link:
Steps to reproduce:

1. create a dialog component
2. place a datepicker inside it
3. try to choose a date

Expected Behavior

When the calendar icon is clicked, a calendar opens.

Actual Behavior

the calendar doesn't open and the mentioned error is shown in the console.

Environment

Angular CLI: 17.0.0
Node: 20.9.0
Package Manager: npm 10.1.0
OS: win32 x64

Angular: 17.0.2
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.1700.0
@angular-devkit/build-angular 17.0.0
@angular-devkit/core 17.0.0
@angular-devkit/schematics 17.0.0
@angular/cdk 17.0.0
@angular/cli 17.0.0
@angular/google-maps 17.0.0
@angular/material 17.0.0
@schematics/angular 17.0.0
rxjs 7.8.1
typescript 5.2.2
zone.js 0.14.2

[hahnd]

Same problem here:

Angular CLI: 17.0.3
Node: 18.18.2
Package Manager: npm 9.4.0
OS: darwin arm64

Angular: 17.0.4
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1700.3
@angular-devkit/build-angular   17.0.3
@angular-devkit/core            17.0.3
@angular-devkit/schematics      17.0.3
@angular/cdk                    17.0.1
@angular/cli                    17.0.3
@angular/material               17.0.1
@schematics/angular             17.0.3
rxjs                            7.8.1
typescript                      5.2.2
zone.js                         0.14.2

[mahesh-riddles]

Same problem here
It happens to me only when i try to use the date picker on a model.

It works in normal components.
What is the fix for this?

[johndobrien]

I am experiencing the same thing, however it is working fine in a different dialog window. I am trying to figure out why it fails in this new dialog.

[thencke]

I have a very similar issue, datepickers and calendar won't work inside dialogs, here's an example:

https://stackblitz.com/edit/stackblitz-starters-msepdb?file=src%2Fmain.ts

Hope it helps, if anyone has a solution, please let us know

[chusothe41]

Same here

[chusothe41]

Fixed, add this to your dialog component:
providers: [ {provide: DateAdapter, useClass: NativeDateAdapter}, {provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS}, ],