docs(material/datepicker): display datepicker inside a dialog example (angular#29404)

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

Author: GiftLanga

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,13 @@
+<h2 mat-dialog-title>Datepicker in a Dialog</h2>
+<mat-dialog-content align="center">
+  <mat-form-field>
+    <mat-label>Select a date</mat-label>
+    <input matInput [matDatepicker]="picker" [formControl]="date">
+    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
+    <mat-datepicker #picker></mat-datepicker>
+  </mat-form-field>
+</mat-dialog-content>
+<mat-dialog-actions>
+  <button mat-button mat-dialog-close>Clear</button>
+  <button mat-button [mat-dialog-close]="date.value" cdkFocusInitial>Ok</button>
+</mat-dialog-actions>

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,69 @@
+import {ChangeDetectionStrategy, Component, Inject, model} from '@angular/core';
+import {FormControl, ReactiveFormsModule} from '@angular/forms';
+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';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+
+export interface DialogData {
+  selectedDate: Date;
+}
+
+/** @title Datepicker inside a MatDialog */
+@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(public dialog: MatDialog) {}
+
+  openDialog() {
+    const dialogRef = this.dialog.open(DatepickerDialogExampleDialog, {
+      minWidth: '500px',
+      data: {selectedDate: this.selectedDate()},
+    });
+
+    dialogRef.afterClosed().subscribe(result => {
+      this.selectedDate.set(result);
+    });
+  }
+}
+
+@Component({
+  selector: 'datepicker-dialog-example',
+  templateUrl: 'datepicker-dialog-example-dialog.html',
+  standalone: true,
+  imports: [
+    MatDatepickerModule,
+    MatDialogModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatInputModule,
+    ReactiveFormsModule,
+  ],
+  providers: [
+    provideNativeDateAdapter(),
+    {provide: MAT_DATE_FORMATS, useValue: MAT_NATIVE_DATE_FORMATS},
+  ],
+})
+export class DatepickerDialogExampleDialog {
+  readonly date = new FormControl(new Date());
+
+  constructor(
+    public dialogRef: MatDialogRef<DatepickerDialogExampleDialog>,
+    @Inject(MAT_DIALOG_DATA) public data: DialogData,
+  ) {
+    this.date.setValue(data.selectedDate);
+  }
+}

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';