fix(material/datepicker): display datepicker inside a dialog example

Adds an example that demonstrates how to display
a datepicker inside a matDialog component.

Fixes #28186

src/components-examples/material/datepicker/BUILD.bazel

@@ -21,6 +21,7 @@ ng_module(
         "//src/material/core",
         "//src/material/datepicker",
         "//src/material/datepicker/testing",
+        "//src/material/dialog",
         "//src/material/icon",
         "//src/material/input",
         "@npm//@angular/forms",

src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html

@@ -0,0 +1,10 @@
+<h2 mat-dialog-title>Calendar in a Dialog</h2>
+<mat-dialog-content align="center">
+  <div class="example-calendar-container">
+    <mat-calendar [(selected)]="data.selectedDate"></mat-calendar>
+  </div>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button (click)="onClear()">Clear</button>
+  <button mat-button [mat-dialog-close]="data.selectedDate" cdkFocusInitial>Ok</button>
+</mat-dialog-actions>

src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.css

@@ -0,0 +1,4 @@
+.example-calendar-container {
+  width: 300px;
+  height: 350px;
+}

src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html

@@ -0,0 +1,2 @@
+<p>Selected date: {{selectedDate()}}</p>
+<button mat-flat-button color="primary" (click)="openDialog()">Open Dialog</button>

src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts

@@ -0,0 +1,60 @@
+import {ChangeDetectionStrategy, Component, Inject, model} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
+import {
+  MAT_DATE_FORMATS,
+  MAT_NATIVE_DATE_FORMATS,
+  provideNativeDateAdapter,
+} from '@angular/material/core';
+import {MatDatepickerModule} from '@angular/material/datepicker';
+import {MAT_DIALOG_DATA, MatDialog, MatDialogModule, MatDialogRef} from '@angular/material/dialog';
+
+export interface DialogData {
+  selectedDate: Date;
+}
+
+/** @title Datepicker Dialog*/
+@Component({
+  selector: 'datepicker-dialog-example',
+  templateUrl: 'datepicker-dialog-example.html',
+  standalone: true,
+  imports: [MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class DatepickerDialogExample {
+  selectedDate = model<Date | null>(null);
+
+  constructor(private dialog: MatDialog) {}
+
+  openDialog() {
+    const dialogRef = this.dialog.open(DatepickerDialogExampleDialog, {
+      minWidth: 360,
+      data: {selectedDate: this.selectedDate()},
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.selectedDate.set(result);
+    });
+  }
+}
+
+@Component({
+  selector: 'datepicker-dialog-example',
+  standalone: true,
+  imports: [MatDatepickerModule, MatDialogModule, MatButtonModule],
+  providers: [
+    provideNativeDateAdapter(),
+    {provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS},
+  ],
+  templateUrl: 'datepicker-dialog-example-dialog.html',
+  styleUrl: 'datepicker-dialog-example.css',
+})
+export class DatepickerDialogExampleDialog {
+  constructor(
+    public dialogRef: MatDialogRef<DatepickerDialogExampleDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) {}
+
+  onClear(): void {
+    this.dialogRef.close();
+  }
+}

src/components-examples/material/datepicker/index.ts

@@ -25,3 +25,4 @@ export {DatepickerStartViewExample} from './datepicker-start-view/datepicker-sta
 export {DatepickerTouchExample} from './datepicker-touch/datepicker-touch-example';
 export {DatepickerValueExample} from './datepicker-value/datepicker-value-example';
 export {DatepickerViewsSelectionExample} from './datepicker-views-selection/datepicker-views-selection-example';
+export {DatepickerDialogExample} from './datepicker-dialog/datepicker-dialog-example';