docs(material/datepicker): Update datepicker docs & examples (#29236)

Author: mmalerba

src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts

@@ -1,5 +1,5 @@
-import {Component} from '@angular/core';
-import {FormGroup, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -16,13 +16,14 @@ const year = today.getFullYear();
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateRangePickerComparisonExample {
-  campaignOne = new FormGroup({
+  readonly campaignOne = new FormGroup({
     start: new FormControl(new Date(year, month, 13)),
     end: new FormControl(new Date(year, month, 16)),
   });
-  campaignTwo = new FormGroup({
+  readonly campaignTwo = new FormGroup({
     start: new FormControl(new Date(year, month, 15)),
     end: new FormControl(new Date(year, month, 19)),
   });

src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts

@@ -1,9 +1,9 @@
-import {Component} from '@angular/core';
-import {FormGroup, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {JsonPipe} from '@angular/common';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
+import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {provideNativeDateAdapter} from '@angular/material/core';
 
 /** @title Date range picker forms integration */
 @Component({
@@ -12,9 +12,10 @@ import {provideNativeDateAdapter} from '@angular/material/core';
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule, JsonPipe],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateRangePickerFormsExample {
-  range = new FormGroup({
+  readonly range = new FormGroup({
     start: new FormControl<Date | null>(null),
     end: new FormControl<Date | null>(null),
   });

src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -10,5 +10,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
   standalone: true,
   imports: [MatFormFieldModule, MatDatepickerModule],
   providers: [provideNativeDateAdapter()],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateRangePickerOverviewExample {}

src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts

@@ -1,9 +1,9 @@
-import {Component, Injectable} from '@angular/core';
+import {ChangeDetectionStrategy, Component, Injectable} from '@angular/core';
 import {DateAdapter, provideNativeDateAdapter} from '@angular/material/core';
 import {
-  MatDateRangeSelectionStrategy,
   DateRange,
   MAT_DATE_RANGE_SELECTION_STRATEGY,
+  MatDateRangeSelectionStrategy,
   MatDatepickerModule,
 } from '@angular/material/datepicker';
 import {MatFormFieldModule} from '@angular/material/form-field';
@@ -44,5 +44,6 @@ export class FiveDayRangeSelectionStrategy<D> implements MatDateRangeSelectionSt
   ],
   standalone: true,
   imports: [MatFormFieldModule, MatDatepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DateRangePickerSelectionStrategyExample {}

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

@@ -1,32 +1,32 @@
 <mat-form-field class="example-form-field">
   <mat-label>Choose a date</mat-label>
-  <input matInput [matDatepicker]="datepicker">
+  <input matInput [matDatepicker]="datepicker" />
   <mat-hint>MM/DD/YYYY</mat-hint>
   <mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
-<!-- #docregion datepicker-actions -->
+  <!-- #docregion datepicker-actions -->
   <mat-datepicker #datepicker>
     <mat-datepicker-actions>
       <button mat-button matDatepickerCancel>Cancel</button>
-      <button mat-raised-button color="primary" matDatepickerApply>Apply</button>
+      <button mat-raised-button matDatepickerApply>Apply</button>
     </mat-datepicker-actions>
   </mat-datepicker>
-<!-- #enddocregion datepicker-actions -->
+  <!-- #enddocregion datepicker-actions -->
 </mat-form-field>
 
 <mat-form-field class="example-form-field">
   <mat-label>Enter a date range</mat-label>
   <mat-date-range-input [rangePicker]="rangePicker">
-    <input matStartDate placeholder="Start date">
-    <input matEndDate placeholder="End date">
+    <input matStartDate placeholder="Start date" />
+    <input matEndDate placeholder="End date" />
   </mat-date-range-input>
   <mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
   <mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
-<!-- #docregion date-range-picker-actions -->
+  <!-- #docregion date-range-picker-actions -->
   <mat-date-range-picker #rangePicker>
     <mat-date-range-picker-actions>
       <button mat-button matDateRangePickerCancel>Cancel</button>
-      <button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
+      <button mat-raised-button matDateRangePickerApply>Apply</button>
     </mat-date-range-picker-actions>
   </mat-date-range-picker>
-<!-- #enddocregion date-range-picker-actions -->
+  <!-- #enddocregion date-range-picker-actions -->
 </mat-form-field>

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

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatInputModule} from '@angular/material/input';
@@ -13,5 +13,6 @@ import {provideNativeDateAdapter} from '@angular/material/core';
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerActionsExample {}

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

@@ -1,9 +1,9 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonModule} from '@angular/material/button';
+import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatInputModule} from '@angular/material/input';
 
 /** @title Datepicker open method */
 @Component({
@@ -13,5 +13,6 @@ import {provideNativeDateAdapter} from '@angular/material/core';
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerApiExample {}

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

@@ -1,35 +1,29 @@
-import {
-  ChangeDetectionStrategy,
-  ChangeDetectorRef,
-  Component,
-  Inject,
-  OnDestroy,
-} from '@angular/core';
-import {MatCalendar, MatDatepickerModule} from '@angular/material/datepicker';
+import {ChangeDetectionStrategy, Component, Inject, OnDestroy, signal} from '@angular/core';
+import {MatButtonModule} from '@angular/material/button';
 import {
   DateAdapter,
   MAT_DATE_FORMATS,
   MatDateFormats,
   provideNativeDateAdapter,
 } from '@angular/material/core';
-import {Subject} from 'rxjs';
-import {takeUntil} from 'rxjs/operators';
+import {MatCalendar, MatDatepickerModule} from '@angular/material/datepicker';
+import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
-import {MatButtonModule} from '@angular/material/button';
 import {MatInputModule} from '@angular/material/input';
-import {MatFormFieldModule} from '@angular/material/form-field';
+import {Subject} from 'rxjs';
+import {startWith, takeUntil} from 'rxjs/operators';
 
 /** @title Datepicker with custom calendar header */
 @Component({
   selector: 'datepicker-custom-header-example',
   templateUrl: 'datepicker-custom-header-example.html',
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerCustomHeaderExample {
-  exampleHeader = ExampleHeader;
+  readonly exampleHeader = ExampleHeader;
 }
 
 /** Custom header component for datepicker. */
@@ -57,7 +51,7 @@ export class DatepickerCustomHeaderExample {
       <button mat-icon-button (click)="previousClicked('month')">
         <mat-icon>keyboard_arrow_left</mat-icon>
       </button>
-      <span class="example-header-label">{{periodLabel}}</span>
+      <span class="example-header-label">{{periodLabel()}}</span>
       <button mat-icon-button (click)="nextClicked('month')">
         <mat-icon>keyboard_arrow_right</mat-icon>
       </button>
@@ -66,33 +60,34 @@ export class DatepickerCustomHeaderExample {
       </button>
     </div>
   `,
-  changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
   imports: [MatButtonModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ExampleHeader<D> implements OnDestroy {
   private _destroyed = new Subject<void>();
 
+  readonly periodLabel = signal('');
+
   constructor(
     private _calendar: MatCalendar<D>,
     private _dateAdapter: DateAdapter<D>,
     @Inject(MAT_DATE_FORMATS) private _dateFormats: MatDateFormats,
-    cdr: ChangeDetectorRef,
   ) {
-    _calendar.stateChanges.pipe(takeUntil(this._destroyed)).subscribe(() => cdr.markForCheck());
+    _calendar.stateChanges.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+      this.periodLabel.set(
+        this._dateAdapter
+          .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
+          .toLocaleUpperCase(),
+      );
+    });
   }
 
   ngOnDestroy() {
     this._destroyed.next();
     this._destroyed.complete();
   }
 
-  get periodLabel() {
-    return this._dateAdapter
-      .format(this._calendar.activeDate, this._dateFormats.display.monthYearLabel)
-      .toLocaleUpperCase();
-  }
-
   previousClicked(mode: 'month' | 'year') {
     this._calendar.activeDate =
       mode === 'month'

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

@@ -1,9 +1,9 @@
-import {Component} from '@angular/core';
-import {MatIconModule} from '@angular/material/icon';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
 
 /** @title Datepicker with custom icon */
 @Component({
@@ -12,5 +12,6 @@ import {provideNativeDateAdapter} from '@angular/material/core';
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatIconModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerCustomIconExample {}

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

@@ -1,8 +1,8 @@
-import {Component, ViewEncapsulation} from '@angular/core';
+import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatCalendarCellClassFunction, MatDatepickerModule} from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatInputModule} from '@angular/material/input';
 
 /** @title Datepicker with custom date classes */
 @Component({
@@ -13,6 +13,7 @@ import {provideNativeDateAdapter} from '@angular/material/core';
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerDateClassExample {
   dateClass: MatCalendarCellClassFunction<Date> = (cellDate, view) => {

src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts

@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
+import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatInputModule} from '@angular/material/input';
 
 /** @title Disabled datepicker */
 @Component({
@@ -11,5 +11,6 @@ import {provideNativeDateAdapter} from '@angular/material/core';
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerDisabledExample {}

src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.ts

@@ -1,14 +1,18 @@
 <mat-form-field>
   <mat-label>Input & change events</mat-label>
-  <input matInput [matDatepicker]="picker"
-         (dateInput)="addEvent('input', $event)" (dateChange)="addEvent('change', $event)">
+  <input
+    matInput
+    [matDatepicker]="picker"
+    (dateInput)="addEvent('input', $event)"
+    (dateChange)="addEvent('change', $event)"
+  />
   <mat-hint>MM/DD/YYYY</mat-hint>
   <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
   <mat-datepicker #picker></mat-datepicker>
 </mat-form-field>
 
 <div class="example-events">
-  @for (e of events; track e) {
+  @for (e of events(); track e) {
     <div>{{e}}</div>
   }
 </div>

src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts

@@ -1,8 +1,8 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
+import {provideNativeDateAdapter} from '@angular/material/core';
 import {MatDatepickerInputEvent, MatDatepickerModule} from '@angular/material/datepicker';
-import {MatInputModule} from '@angular/material/input';
 import {MatFormFieldModule} from '@angular/material/form-field';
-import {provideNativeDateAdapter} from '@angular/material/core';
+import {MatInputModule} from '@angular/material/input';
 
 /** @title Datepicker input and change events */
 @Component({
@@ -12,11 +12,12 @@ import {provideNativeDateAdapter} from '@angular/material/core';
   standalone: true,
   providers: [provideNativeDateAdapter()],
   imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class DatepickerEventsExample {
-  events: string[] = [];
+  events = signal<string[]>([]);
 
   addEvent(type: string, event: MatDatepickerInputEvent<Date>) {
-    this.events.push(`${type}: ${event.value}`);
+    this.events.update(events => [...events, `${type}: ${event.value}`]);
   }
 }