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

(cherry picked from commit de4b13a)

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 {}