bug(MatCalendar): MatCalendar/MatDatePicker does not work when inside a MatDialog

[thencke]

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

No response

Description

There is a strange bug when I try to put a mat-calendar component inside a mat-dialog, even importing the date adapters and such it behaves like if the date adapter was not imported/loaded since it throws an error in console.

Reproduction

StackBlitz link: https://stackblitz.com/edit/stackblitz-starters-msepdb?file=src%2Fmain.ts Steps to reproduce:

1. Click on 'Open Dialog' button
2. The calendar will not show correctly

Expected Behavior

To show the calendar just like if put directly in a 'base' component (not in a dialog)

Actual Behavior

The calendar shows wrongly and an error is thrown in console.

Environment

• Angular: 17.0.7
• CDK/Material: 17.0.4
• Browser(s): Chrome, Opera
• Operating System (e.g. Windows, macOS, Ubuntu): All

[thencke]

If use angular ngModules instead of standalone components, it seems to be working fine.

[chusothe41]

Add this to the dialog component providers: [ {provide: DateAdapter, useClass: NativeDateAdapter}, {provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS}, ],

[thencke]

@chusothe41 it works, thanks, closing the issue.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}