From 13daaeafc0f9ed88c22006e8d1de8683aa1f70c3 Mon Sep 17 00:00:00 2001
From: GiftLanga <glanga@retrorabbit.co.za>
Date: Thu, 11 Jul 2024 10:54:37 +0200
Subject: [PATCH] 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
---
 .../material/datepicker/BUILD.bazel           |  1 +
 .../datepicker-dialog-example-dialog.html     | 13 ++++
 .../datepicker-dialog-example.html            |  2 +
 .../datepicker-dialog-example.ts              | 69 +++++++++++++++++++
 .../material/datepicker/index.ts              |  1 +
 5 files changed, 86 insertions(+)
 create mode 100644 src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html
 create mode 100644 src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html
 create mode 100644 src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts

diff --git a/src/components-examples/material/datepicker/BUILD.bazel b/src/components-examples/material/datepicker/BUILD.bazel
index 70b93d60fbc7..433d3241a235 100644
--- a/src/components-examples/material/datepicker/BUILD.bazel
+++ b/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",
diff --git a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example-dialog.html
new file mode 100644
index 000000000000..375a5dc526f9
--- /dev/null
+++ b/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>
diff --git a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.html
new file mode 100644
index 000000000000..95023116f01c
--- /dev/null
+++ b/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>
diff --git a/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts b/src/components-examples/material/datepicker/datepicker-dialog/datepicker-dialog-example.ts
new file mode 100644
index 000000000000..23c148cac64a
--- /dev/null
+++ b/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);
+  }
+}
diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts
index d62989a242fd..9040964dab77 100644
--- a/src/components-examples/material/datepicker/index.ts
+++ b/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';