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

[MichalZonis]

Is this a regression?

• [X] 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}, ],

[GalasMichal]

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

Thank you for me works, but i wonder why it doesnt works if i put it inside Providers app.config.ts