Skip to content

Commit de4b13a

Browse files
authored
docs(material/datepicker): Update datepicker docs & examples (#29236)
1 parent 70780a6 commit de4b13a

File tree

35 files changed

+210
-233
lines changed

35 files changed

+210
-233
lines changed

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import {Component} from '@angular/core';
2-
import {FormGroup, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
1+
import {ChangeDetectionStrategy, Component} from '@angular/core';
2+
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
33
import {provideNativeDateAdapter} from '@angular/material/core';
44
import {MatDatepickerModule} from '@angular/material/datepicker';
55
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -16,13 +16,14 @@ const year = today.getFullYear();
1616
standalone: true,
1717
providers: [provideNativeDateAdapter()],
1818
imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule],
19+
changeDetection: ChangeDetectionStrategy.OnPush,
1920
})
2021
export class DateRangePickerComparisonExample {
21-
campaignOne = new FormGroup({
22+
readonly campaignOne = new FormGroup({
2223
start: new FormControl(new Date(year, month, 13)),
2324
end: new FormControl(new Date(year, month, 16)),
2425
});
25-
campaignTwo = new FormGroup({
26+
readonly campaignTwo = new FormGroup({
2627
start: new FormControl(new Date(year, month, 15)),
2728
end: new FormControl(new Date(year, month, 19)),
2829
});

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {Component} from '@angular/core';
2-
import {FormGroup, FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
31
import {JsonPipe} from '@angular/common';
2+
import {ChangeDetectionStrategy, Component} from '@angular/core';
3+
import {FormControl, FormGroup, FormsModule, ReactiveFormsModule} from '@angular/forms';
4+
import {provideNativeDateAdapter} from '@angular/material/core';
45
import {MatDatepickerModule} from '@angular/material/datepicker';
56
import {MatFormFieldModule} from '@angular/material/form-field';
6-
import {provideNativeDateAdapter} from '@angular/material/core';
77

88
/** @title Date range picker forms integration */
99
@Component({
@@ -12,9 +12,10 @@ import {provideNativeDateAdapter} from '@angular/material/core';
1212
standalone: true,
1313
providers: [provideNativeDateAdapter()],
1414
imports: [MatFormFieldModule, MatDatepickerModule, FormsModule, ReactiveFormsModule, JsonPipe],
15+
changeDetection: ChangeDetectionStrategy.OnPush,
1516
})
1617
export class DateRangePickerFormsExample {
17-
range = new FormGroup({
18+
readonly range = new FormGroup({
1819
start: new FormControl<Date | null>(null),
1920
end: new FormControl<Date | null>(null),
2021
});

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component} from '@angular/core';
1+
import {ChangeDetectionStrategy, Component} from '@angular/core';
22
import {provideNativeDateAdapter} from '@angular/material/core';
33
import {MatDatepickerModule} from '@angular/material/datepicker';
44
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -10,5 +10,6 @@ import {MatFormFieldModule} from '@angular/material/form-field';
1010
standalone: true,
1111
imports: [MatFormFieldModule, MatDatepickerModule],
1212
providers: [provideNativeDateAdapter()],
13+
changeDetection: ChangeDetectionStrategy.OnPush,
1314
})
1415
export class DateRangePickerOverviewExample {}

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

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {Component, Injectable} from '@angular/core';
1+
import {ChangeDetectionStrategy, Component, Injectable} from '@angular/core';
22
import {DateAdapter, provideNativeDateAdapter} from '@angular/material/core';
33
import {
4-
MatDateRangeSelectionStrategy,
54
DateRange,
65
MAT_DATE_RANGE_SELECTION_STRATEGY,
6+
MatDateRangeSelectionStrategy,
77
MatDatepickerModule,
88
} from '@angular/material/datepicker';
99
import {MatFormFieldModule} from '@angular/material/form-field';
@@ -44,5 +44,6 @@ export class FiveDayRangeSelectionStrategy<D> implements MatDateRangeSelectionSt
4444
],
4545
standalone: true,
4646
imports: [MatFormFieldModule, MatDatepickerModule],
47+
changeDetection: ChangeDetectionStrategy.OnPush,
4748
})
4849
export class DateRangePickerSelectionStrategyExample {}
Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
11
<mat-form-field class="example-form-field">
22
<mat-label>Choose a date</mat-label>
3-
<input matInput [matDatepicker]="datepicker">
3+
<input matInput [matDatepicker]="datepicker" />
44
<mat-hint>MM/DD/YYYY</mat-hint>
55
<mat-datepicker-toggle matIconSuffix [for]="datepicker"></mat-datepicker-toggle>
6-
<!-- #docregion datepicker-actions -->
6+
<!-- #docregion datepicker-actions -->
77
<mat-datepicker #datepicker>
88
<mat-datepicker-actions>
99
<button mat-button matDatepickerCancel>Cancel</button>
10-
<button mat-raised-button color="primary" matDatepickerApply>Apply</button>
10+
<button mat-raised-button matDatepickerApply>Apply</button>
1111
</mat-datepicker-actions>
1212
</mat-datepicker>
13-
<!-- #enddocregion datepicker-actions -->
13+
<!-- #enddocregion datepicker-actions -->
1414
</mat-form-field>
1515

1616
<mat-form-field class="example-form-field">
1717
<mat-label>Enter a date range</mat-label>
1818
<mat-date-range-input [rangePicker]="rangePicker">
19-
<input matStartDate placeholder="Start date">
20-
<input matEndDate placeholder="End date">
19+
<input matStartDate placeholder="Start date" />
20+
<input matEndDate placeholder="End date" />
2121
</mat-date-range-input>
2222
<mat-hint>MM/DD/YYYY – MM/DD/YYYY</mat-hint>
2323
<mat-datepicker-toggle matIconSuffix [for]="rangePicker"></mat-datepicker-toggle>
24-
<!-- #docregion date-range-picker-actions -->
24+
<!-- #docregion date-range-picker-actions -->
2525
<mat-date-range-picker #rangePicker>
2626
<mat-date-range-picker-actions>
2727
<button mat-button matDateRangePickerCancel>Cancel</button>
28-
<button mat-raised-button color="primary" matDateRangePickerApply>Apply</button>
28+
<button mat-raised-button matDateRangePickerApply>Apply</button>
2929
</mat-date-range-picker-actions>
3030
</mat-date-range-picker>
31-
<!-- #enddocregion date-range-picker-actions -->
31+
<!-- #enddocregion date-range-picker-actions -->
3232
</mat-form-field>

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component} from '@angular/core';
1+
import {ChangeDetectionStrategy, Component} from '@angular/core';
22
import {MatButtonModule} from '@angular/material/button';
33
import {MatDatepickerModule} from '@angular/material/datepicker';
44
import {MatInputModule} from '@angular/material/input';
@@ -13,5 +13,6 @@ import {provideNativeDateAdapter} from '@angular/material/core';
1313
standalone: true,
1414
providers: [provideNativeDateAdapter()],
1515
imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
16+
changeDetection: ChangeDetectionStrategy.OnPush,
1617
})
1718
export class DatepickerActionsExample {}
Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1-
import {Component} from '@angular/core';
1+
import {ChangeDetectionStrategy, Component} from '@angular/core';
22
import {MatButtonModule} from '@angular/material/button';
3+
import {provideNativeDateAdapter} from '@angular/material/core';
34
import {MatDatepickerModule} from '@angular/material/datepicker';
4-
import {MatInputModule} from '@angular/material/input';
55
import {MatFormFieldModule} from '@angular/material/form-field';
6-
import {provideNativeDateAdapter} from '@angular/material/core';
6+
import {MatInputModule} from '@angular/material/input';
77

88
/** @title Datepicker open method */
99
@Component({
@@ -13,5 +13,6 @@ import {provideNativeDateAdapter} from '@angular/material/core';
1313
standalone: true,
1414
providers: [provideNativeDateAdapter()],
1515
imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule],
16+
changeDetection: ChangeDetectionStrategy.OnPush,
1617
})
1718
export class DatepickerApiExample {}

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

Lines changed: 0 additions & 3 deletions
This file was deleted.

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

Lines changed: 0 additions & 15 deletions
This file was deleted.

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

Lines changed: 0 additions & 16 deletions
This file was deleted.

0 commit comments

Comments
 (0)