From de4b13afe80e02ec04a73d39ca57bd2f9e0d362c Mon Sep 17 00:00:00 2001 From: Miles Malerba Date: Wed, 12 Jun 2024 15:27:35 -0700 Subject: [PATCH] docs(material/datepicker): Update datepicker docs & examples (#29236) --- .../date-range-picker-comparison-example.ts | 9 +-- .../date-range-picker-forms-example.ts | 9 +-- .../date-range-picker-overview-example.ts | 3 +- ...range-picker-selection-strategy-example.ts | 5 +- .../datepicker-actions-example.html | 18 +++--- .../datepicker-actions-example.ts | 3 +- .../datepicker-api/datepicker-api-example.ts | 7 ++- .../datepicker-color-example.css | 3 - .../datepicker-color-example.html | 15 ----- .../datepicker-color-example.ts | 16 ----- .../datepicker-custom-header-example.ts | 43 ++++++------- .../datepicker-custom-icon-example.ts | 9 +-- .../datepicker-date-class-example.ts | 7 ++- .../datepicker-disabled-example.ts | 7 ++- .../datepicker-events-example.html | 10 ++- .../datepicker-events-example.ts | 11 ++-- .../datepicker-filter-example.ts | 7 ++- .../datepicker-formats-example.ts | 12 ++-- .../datepicker-harness-example.html | 6 +- .../datepicker-harness-example.ts | 5 +- .../datepicker-inline-calendar-example.html | 2 +- .../datepicker-inline-calendar-example.ts | 7 ++- .../datepicker-locale-example.html | 4 +- .../datepicker-locale-example.ts | 40 ++++++------ .../datepicker-min-max-example.html | 2 +- .../datepicker-min-max-example.ts | 20 +++--- .../datepicker-moment-example.ts | 12 ++-- .../datepicker-overview-example.ts | 3 +- .../datepicker-start-view-example.ts | 9 +-- .../datepicker-touch-example.ts | 3 +- .../datepicker-value-example.ts | 11 ++-- .../datepicker-views-selection-example.ts | 5 +- .../material/datepicker/index.ts | 1 - src/material/datepicker/datepicker-base.ts | 62 +++++++++++-------- src/material/datepicker/datepicker.md | 57 ++++++++--------- 35 files changed, 210 insertions(+), 233 deletions(-) delete mode 100644 src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.css delete mode 100644 src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html delete mode 100644 src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts diff --git a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts b/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts index b11f3ef380e0..07ce8e6a5ac0 100644 --- a/src/components-examples/material/datepicker/date-range-picker-comparison/date-range-picker-comparison-example.ts +++ b/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)), }); diff --git a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts b/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts index 93f7559f0757..907abf773ad0 100644 --- a/src/components-examples/material/datepicker/date-range-picker-forms/date-range-picker-forms-example.ts +++ b/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(null), end: new FormControl(null), }); diff --git a/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.ts b/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.ts index 2b59e0a15da3..32e17bdc1cdb 100644 --- a/src/components-examples/material/datepicker/date-range-picker-overview/date-range-picker-overview-example.ts +++ b/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 {} diff --git a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts b/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts index 075be05b1183..7f18ade38e3f 100644 --- a/src/components-examples/material/datepicker/date-range-picker-selection-strategy/date-range-picker-selection-strategy-example.ts +++ b/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 implements MatDateRangeSelectionSt ], standalone: true, imports: [MatFormFieldModule, MatDatepickerModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DateRangePickerSelectionStrategyExample {} diff --git a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html index 460a271dd2d5..29ae1ae580f0 100644 --- a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html +++ b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.html @@ -1,32 +1,32 @@ Choose a date - + MM/DD/YYYY - + - + - + Enter a date range - - + + MM/DD/YYYY – MM/DD/YYYY - + - + - + diff --git a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.ts b/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.ts index aa9db2362cd4..6cd6ee931bd2 100644 --- a/src/components-examples/material/datepicker/datepicker-actions/datepicker-actions-example.ts +++ b/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 {} diff --git a/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.ts b/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.ts index 0560293266ff..5368a236f301 100644 --- a/src/components-examples/material/datepicker/datepicker-api/datepicker-api-example.ts +++ b/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 {} diff --git a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.css b/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.css deleted file mode 100644 index ece1d0db513c..000000000000 --- a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.css +++ /dev/null @@ -1,3 +0,0 @@ -mat-form-field { - margin-right: 12px; -} diff --git a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html b/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html deleted file mode 100644 index 9e69871270ce..000000000000 --- a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.html +++ /dev/null @@ -1,15 +0,0 @@ - - Inherited calendar color - - MM/DD/YYYY - - - - - - Custom calendar color - - MM/DD/YYYY - - - diff --git a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts b/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts deleted file mode 100644 index 1c7ce411d875..000000000000 --- a/src/components-examples/material/datepicker/datepicker-color/datepicker-color-example.ts +++ /dev/null @@ -1,16 +0,0 @@ -import {Component} from '@angular/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'; - -/** @title Datepicker palette colors */ -@Component({ - selector: 'datepicker-color-example', - templateUrl: 'datepicker-color-example.html', - styleUrl: 'datepicker-color-example.css', - standalone: true, - providers: [provideNativeDateAdapter()], - imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule], -}) -export class DatepickerColorExample {} diff --git a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts index d2b2c019b4ef..b3dc89f5d8a2 100644 --- a/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts +++ b/src/components-examples/material/datepicker/datepicker-custom-header/datepicker-custom-header-example.ts @@ -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 { - {{periodLabel}} + {{periodLabel()}} @@ -66,20 +60,27 @@ export class DatepickerCustomHeaderExample { `, - changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [MatButtonModule, MatIconModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class ExampleHeader implements OnDestroy { private _destroyed = new Subject(); + readonly periodLabel = signal(''); + constructor( private _calendar: MatCalendar, private _dateAdapter: DateAdapter, @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() { @@ -87,12 +88,6 @@ export class ExampleHeader implements OnDestroy { 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' diff --git a/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.ts b/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.ts index 752846e38c56..9e6489d466d3 100644 --- a/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.ts +++ b/src/components-examples/material/datepicker/datepicker-custom-icon/datepicker-custom-icon-example.ts @@ -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 {} diff --git a/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts b/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts index 769bf00b02a8..fb831f7e145b 100644 --- a/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-example.ts +++ b/src/components-examples/material/datepicker/datepicker-date-class/datepicker-date-class-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 = (cellDate, view) => { diff --git a/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.ts b/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.ts index bc49b2d75cff..2948d4cadebe 100644 --- a/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-example.ts +++ b/src/components-examples/material/datepicker/datepicker-disabled/datepicker-disabled-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 {} diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html index 1dc59fb2450d..6973491dec91 100644 --- a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html +++ b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.html @@ -1,14 +1,18 @@ Input & change events - + MM/DD/YYYY
- @for (e of events; track e) { + @for (e of events(); track e) {
{{e}}
}
diff --git a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts index e8d0d1776e15..354fabe38a80 100644 --- a/src/components-examples/material/datepicker/datepicker-events/datepicker-events-example.ts +++ b/src/components-examples/material/datepicker/datepicker-events/datepicker-events-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([]); addEvent(type: string, event: MatDatepickerInputEvent) { - this.events.push(`${type}: ${event.value}`); + this.events.update(events => [...events, `${type}: ${event.value}`]); } } diff --git a/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.ts b/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.ts index 48deeac155d2..18051587c147 100644 --- a/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-example.ts +++ b/src/components-examples/material/datepicker/datepicker-filter/datepicker-filter-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 Datepicker with filter validation */ @Component({ @@ -11,6 +11,7 @@ import {provideNativeDateAdapter} from '@angular/material/core'; standalone: true, providers: [provideNativeDateAdapter()], imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerFilterExample { myFilter = (d: Date | null): boolean => { diff --git a/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts b/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts index b2291812c3a0..ade7995ea8ee 100644 --- a/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts +++ b/src/components-examples/material/datepicker/datepicker-formats/datepicker-formats-example.ts @@ -1,7 +1,9 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {provideMomentDateAdapter} from '@angular/material-moment-adapter'; - +import {MatDatepickerModule} from '@angular/material/datepicker'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; // Depending on whether rollup is used, moment needs to be imported differently. // Since Moment.js doesn't have a default export, we normally need to import using the `* as` // syntax. However, rollup creates a synthetic default module and we thus need to import it using @@ -9,9 +11,6 @@ import {provideMomentDateAdapter} from '@angular/material-moment-adapter'; import * as _moment from 'moment'; // tslint:disable-next-line:no-duplicate-imports import {default as _rollupMoment} from 'moment'; -import {MatDatepickerModule} from '@angular/material/datepicker'; -import {MatInputModule} from '@angular/material/input'; -import {MatFormFieldModule} from '@angular/material/form-field'; const moment = _rollupMoment || _moment; @@ -47,7 +46,8 @@ export const MY_FORMATS = { FormsModule, ReactiveFormsModule, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerFormatsExample { - date = new FormControl(moment()); + readonly date = new FormControl(moment()); } diff --git a/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.html b/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.html index daef3ea96968..58228373eceb 100644 --- a/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.html +++ b/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.html @@ -1,6 +1,2 @@ - + diff --git a/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.ts b/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.ts index 500d0d5b8612..7ddb30fc4e22 100644 --- a/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.ts +++ b/src/components-examples/material/datepicker/datepicker-harness/datepicker-harness-example.ts @@ -1,4 +1,4 @@ -import {Component, signal} from '@angular/core'; +import {ChangeDetectionStrategy, Component, model, signal} from '@angular/core'; import {FormsModule} from '@angular/forms'; import {provideNativeDateAdapter} from '@angular/material/core'; import {MatDatepickerModule} from '@angular/material/datepicker'; @@ -13,8 +13,9 @@ import {MatInputModule} from '@angular/material/input'; standalone: true, providers: [provideNativeDateAdapter()], imports: [MatInputModule, MatDatepickerModule, FormsModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerHarnessExample { - date: Date | null = null; + date = model(null); minDate = signal(null); } diff --git a/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.html b/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.html index 8ffcf05863ac..3fb2d5348f78 100644 --- a/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.html +++ b/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.html @@ -1,4 +1,4 @@ -

Selected date: {{selected}}

+

Selected date: {{selected()}}

diff --git a/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts b/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts index f7acfa610c81..b31d24d1c544 100644 --- a/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts +++ b/src/components-examples/material/datepicker/datepicker-inline-calendar/datepicker-inline-calendar-example.ts @@ -1,7 +1,7 @@ -import {Component} from '@angular/core'; -import {MatDatepickerModule} from '@angular/material/datepicker'; +import {ChangeDetectionStrategy, Component, model} from '@angular/core'; import {MatCardModule} from '@angular/material/card'; import {provideNativeDateAdapter} from '@angular/material/core'; +import {MatDatepickerModule} from '@angular/material/datepicker'; /** @title Datepicker inline calendar example */ @Component({ @@ -11,7 +11,8 @@ import {provideNativeDateAdapter} from '@angular/material/core'; standalone: true, providers: [provideNativeDateAdapter()], imports: [MatCardModule, MatDatepickerModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerInlineCalendarExample { - selected: Date | null; + selected = model(null); } diff --git a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html index a0d2983857f2..aa9889acc61b 100644 --- a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html +++ b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.html @@ -1,7 +1,7 @@ Different locale - - {{getDateFormatString()}} + + {{dateFormatString()}} diff --git a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts index 17f4e061c545..383712032b7a 100644 --- a/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts +++ b/src/components-examples/material/datepicker/datepicker-locale/datepicker-locale-example.ts @@ -1,12 +1,12 @@ -import {Component, Inject, OnInit} from '@angular/core'; +import {ChangeDetectionStrategy, Component, OnInit, computed, inject, signal} from '@angular/core'; import {provideMomentDateAdapter} from '@angular/material-moment-adapter'; -import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core'; import {MatButtonModule} from '@angular/material/button'; -import {MatDatepickerModule, MatDatepickerIntl} from '@angular/material/datepicker'; -import {MatInputModule} from '@angular/material/input'; +import {DateAdapter, MAT_DATE_LOCALE} from '@angular/material/core'; +import {MatDatepickerIntl, MatDatepickerModule} from '@angular/material/datepicker'; import {MatFormFieldModule} from '@angular/material/form-field'; -import 'moment/locale/ja'; +import {MatInputModule} from '@angular/material/input'; import 'moment/locale/fr'; +import 'moment/locale/ja'; /** @title Datepicker with different locale */ @Component({ @@ -25,21 +25,28 @@ import 'moment/locale/fr'; ], standalone: true, imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule, MatButtonModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerLocaleExample implements OnInit { - constructor( - private _adapter: DateAdapter, - private _intl: MatDatepickerIntl, - @Inject(MAT_DATE_LOCALE) private _locale: string, - ) {} + private readonly _adapter = inject>(DateAdapter); + private readonly _intl = inject(MatDatepickerIntl); + private readonly _locale = signal(inject(MAT_DATE_LOCALE)); + readonly dateFormatString = computed(() => { + if (this._locale() === 'ja-JP') { + return 'YYYY/MM/DD'; + } else if (this._locale() === 'fr') { + return 'DD/MM/YYYY'; + } + return ''; + }); ngOnInit() { this.updateCloseButtonLabel('カレンダーを閉じる'); } french() { - this._locale = 'fr'; - this._adapter.setLocale(this._locale); + this._locale.set('fr'); + this._adapter.setLocale(this._locale()); this.updateCloseButtonLabel('Fermer le calendrier'); } @@ -47,13 +54,4 @@ export class DatepickerLocaleExample implements OnInit { this._intl.closeCalendarLabel = label; this._intl.changes.next(); } - - getDateFormatString(): string { - if (this._locale === 'ja-JP') { - return 'YYYY/MM/DD'; - } else if (this._locale === 'fr') { - return 'DD/MM/YYYY'; - } - return ''; - } } diff --git a/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html b/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html index a33e3f8338ce..0c0ba98aefcf 100644 --- a/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html +++ b/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.html @@ -1,6 +1,6 @@ Choose a date - + MM/DD/YYYY diff --git a/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.ts b/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.ts index 0d71676c0ca9..d10a9302be26 100644 --- a/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-example.ts +++ b/src/components-examples/material/datepicker/datepicker-min-max/datepicker-min-max-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 Datepicker with min & max validation */ @Component({ @@ -11,15 +11,11 @@ import {provideNativeDateAdapter} from '@angular/material/core'; standalone: true, providers: [provideNativeDateAdapter()], imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerMinMaxExample { - minDate: Date; - maxDate: Date; - - constructor() { - // Set the minimum to January 1st 20 years in the past and December 31st a year in the future. - const currentYear = new Date().getFullYear(); - this.minDate = new Date(currentYear - 20, 0, 1); - this.maxDate = new Date(currentYear + 1, 11, 31); - } + // Set the minimum to January 1st 20 years in the past and December 31st a year in the future. + private readonly _currentYear = new Date().getFullYear(); + readonly minDate = new Date(this._currentYear - 20, 0, 1); + readonly maxDate = new Date(this._currentYear + 1, 11, 31); } diff --git a/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.ts b/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.ts index 003ded4a8a28..c8d95833d83a 100644 --- a/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.ts +++ b/src/components-examples/material/datepicker/datepicker-moment/datepicker-moment-example.ts @@ -1,7 +1,9 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {provideMomentDateAdapter} from '@angular/material-moment-adapter'; - +import {MatDatepickerModule} from '@angular/material/datepicker'; +import {MatFormFieldModule} from '@angular/material/form-field'; +import {MatInputModule} from '@angular/material/input'; // Depending on whether rollup is used, moment needs to be imported differently. // Since Moment.js doesn't have a default export, we normally need to import using the `* as` // syntax. However, rollup creates a synthetic default module and we thus need to import it using @@ -9,9 +11,6 @@ import {provideMomentDateAdapter} from '@angular/material-moment-adapter'; import * as _moment from 'moment'; // tslint:disable-next-line:no-duplicate-imports import {default as _rollupMoment} from 'moment'; -import {MatDatepickerModule} from '@angular/material/datepicker'; -import {MatInputModule} from '@angular/material/input'; -import {MatFormFieldModule} from '@angular/material/form-field'; const moment = _rollupMoment || _moment; @@ -33,8 +32,9 @@ const moment = _rollupMoment || _moment; FormsModule, ReactiveFormsModule, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerMomentExample { // Datepicker takes `Moment` objects instead of `Date` objects. - date = new FormControl(moment([2017, 0, 1])); + readonly date = new FormControl(moment([2017, 0, 1])); } diff --git a/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.ts b/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.ts index 635278caf7fd..3e821deee9fb 100644 --- a/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.ts +++ b/src/components-examples/material/datepicker/datepicker-overview/datepicker-overview-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -11,5 +11,6 @@ import {provideNativeDateAdapter} from '@angular/material/core'; standalone: true, providers: [provideNativeDateAdapter()], imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerOverviewExample {} diff --git a/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.ts b/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.ts index 9ac8dc7bde55..8f7366ca95f5 100644 --- a/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-example.ts +++ b/src/components-examples/material/datepicker/datepicker-start-view/datepicker-start-view-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 Datepicker start date */ @Component({ @@ -11,7 +11,8 @@ import {provideNativeDateAdapter} from '@angular/material/core'; standalone: true, providers: [provideNativeDateAdapter()], imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerStartViewExample { - startDate = new Date(1990, 0, 1); + readonly startDate = new Date(1990, 0, 1); } diff --git a/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.ts b/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.ts index b4346df5c648..24d5ed9d1a2a 100644 --- a/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.ts +++ b/src/components-examples/material/datepicker/datepicker-touch/datepicker-touch-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatInputModule} from '@angular/material/input'; import {MatFormFieldModule} from '@angular/material/form-field'; @@ -11,5 +11,6 @@ import {provideNativeDateAdapter} from '@angular/material/core'; standalone: true, providers: [provideNativeDateAdapter()], imports: [MatFormFieldModule, MatInputModule, MatDatepickerModule], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerTouchExample {} diff --git a/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts b/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts index 34dfd467ff7d..6713992c691f 100644 --- a/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts +++ b/src/components-examples/material/datepicker/datepicker-value/datepicker-value-example.ts @@ -1,9 +1,9 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; +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 selected value */ @Component({ @@ -19,8 +19,9 @@ import {provideNativeDateAdapter} from '@angular/material/core'; FormsModule, ReactiveFormsModule, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerValueExample { - date = new FormControl(new Date()); - serializedDate = new FormControl(new Date().toISOString()); + readonly date = new FormControl(new Date()); + readonly serializedDate = new FormControl(new Date().toISOString()); } diff --git a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts index 75424004adf0..0524a68c2681 100644 --- a/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts +++ b/src/components-examples/material/datepicker/datepicker-views-selection/datepicker-views-selection-example.ts @@ -1,4 +1,4 @@ -import {Component, ViewEncapsulation} from '@angular/core'; +import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {provideMomentDateAdapter} from '@angular/material-moment-adapter'; import {MatDatepicker, MatDatepickerModule} from '@angular/material/datepicker'; @@ -49,9 +49,10 @@ export const MY_FORMATS = { FormsModule, ReactiveFormsModule, ], + changeDetection: ChangeDetectionStrategy.OnPush, }) export class DatepickerViewsSelectionExample { - date = new FormControl(moment()); + readonly date = new FormControl(moment()); setMonthAndYear(normalizedMonthAndYear: Moment, datepicker: MatDatepicker) { const ctrlValue = this.date.value ?? moment(); diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts index 88b3c566aef1..d62989a242fd 100644 --- a/src/components-examples/material/datepicker/index.ts +++ b/src/components-examples/material/datepicker/index.ts @@ -5,7 +5,6 @@ export {DateRangePickerSelectionStrategyExample} from './date-range-picker-selec export {DatepickerActionsExample} from './datepicker-actions/datepicker-actions-example'; export {DatepickerApiExample} from './datepicker-api/datepicker-api-example'; -export {DatepickerColorExample} from './datepicker-color/datepicker-color-example'; export { DatepickerCustomHeaderExample, ExampleHeader, diff --git a/src/material/datepicker/datepicker-base.ts b/src/material/datepicker/datepicker-base.ts index 71143a3311c9..57ff4dfdc8ec 100644 --- a/src/material/datepicker/datepicker-base.ts +++ b/src/material/datepicker/datepicker-base.ts @@ -6,6 +6,8 @@ * found in the LICENSE file at https://angular.io/license */ +import {AnimationEvent} from '@angular/animations'; +import {CdkTrapFocus} from '@angular/cdk/a11y'; import {Directionality} from '@angular/cdk/bidi'; import {coerceStringArray} from '@angular/cdk/coercion'; import { @@ -20,63 +22,61 @@ import { UP_ARROW, } from '@angular/cdk/keycodes'; import { + FlexibleConnectedPositionStrategy, Overlay, OverlayConfig, OverlayRef, ScrollStrategy, - FlexibleConnectedPositionStrategy, } from '@angular/cdk/overlay'; +import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform'; import {CdkPortalOutlet, ComponentPortal, ComponentType, TemplatePortal} from '@angular/cdk/portal'; +import {DOCUMENT} from '@angular/common'; import { + afterNextRender, AfterViewInit, + booleanAttribute, ChangeDetectionStrategy, + ChangeDetectorRef, Component, ComponentRef, + Directive, ElementRef, EventEmitter, Inject, + inject, InjectionToken, + Injector, Input, NgZone, + OnChanges, OnDestroy, + OnInit, Optional, Output, + SimpleChanges, ViewChild, ViewContainerRef, ViewEncapsulation, - ChangeDetectorRef, - Directive, - OnChanges, - SimpleChanges, - OnInit, - inject, - booleanAttribute, - afterNextRender, - Injector, } from '@angular/core'; +import {MatButton} from '@angular/material/button'; import {DateAdapter, ThemePalette} from '@angular/material/core'; -import {AnimationEvent} from '@angular/animations'; -import {merge, Subject, Observable, Subscription} from 'rxjs'; +import {merge, Observable, Subject, Subscription} from 'rxjs'; import {filter, take} from 'rxjs/operators'; -import {_getFocusedElementPierceShadowDom} from '@angular/cdk/platform'; import {MatCalendar, MatCalendarView} from './calendar'; -import {matDatepickerAnimations} from './datepicker-animations'; -import {createMissingDateImplError} from './datepicker-errors'; -import {MatCalendarUserEvent, MatCalendarCellClassFunction} from './calendar-body'; -import {DateFilterFn} from './datepicker-input-base'; -import { - ExtractDateTypeFromSelection, - MatDateSelectionModel, - DateRange, -} from './date-selection-model'; +import {MatCalendarCellClassFunction, MatCalendarUserEvent} from './calendar-body'; import { MAT_DATE_RANGE_SELECTION_STRATEGY, MatDateRangeSelectionStrategy, } from './date-range-selection-strategy'; +import { + DateRange, + ExtractDateTypeFromSelection, + MatDateSelectionModel, +} from './date-selection-model'; +import {matDatepickerAnimations} from './datepicker-animations'; +import {createMissingDateImplError} from './datepicker-errors'; +import {DateFilterFn} from './datepicker-input-base'; import {MatDatepickerIntl} from './datepicker-intl'; -import {DOCUMENT} from '@angular/common'; -import {MatButton} from '@angular/material/button'; -import {CdkTrapFocus} from '@angular/cdk/a11y'; /** Used to generate a unique ID for each datepicker instance. */ let datepickerUid = 0; @@ -317,7 +317,11 @@ export interface MatDatepickerPanel< > { /** Stream that emits whenever the date picker is closed. */ closedStream: EventEmitter; - /** Color palette to use on the datepicker's calendar. */ + /** + * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it + * has no effect in M3 themes. For information on applying color variants in M3, see + * https://material.angular.io/guide/theming#using-component-color-variants + */ color: ThemePalette; /** The input element the datepicker is associated with. */ datepickerInput: C; @@ -368,7 +372,11 @@ export abstract class MatDatepickerBase< /** The view that the calendar should start in. */ @Input() startView: 'month' | 'year' | 'multi-year' = 'month'; - /** Color palette to use on the datepicker's calendar. */ + /** + * Color palette to use on the datepicker's calendar. This API is supported in M2 themes only, it + * has no effect in M3 themes. For information on applying color variants in M3, see + * https://material.angular.io/guide/theming#using-component-color-variants + */ @Input() get color(): ThemePalette { return ( diff --git a/src/material/datepicker/datepicker.md b/src/material/datepicker/datepicker.md index f14b2f65b1ad..0d5c1e99d1a2 100644 --- a/src/material/datepicker/datepicker.md +++ b/src/material/datepicker/datepicker.md @@ -133,11 +133,11 @@ As with other types of ``, the datepicker works with `@angular/forms` dir ### Changing the datepicker colors -The datepicker popup will automatically inherit the color palette (`primary`, `accent`, or `warn`) -from the `mat-form-field` it is attached to. If you would like to specify a different palette for -the popup you can do so by setting the `color` property on `mat-datepicker`. - - +The color of the datepicker can be changed by specifying a `$color-variant` when applying the +`mat.datepicker-theme` or `mat.datepicker-color` mixins (see the +[theming guide](/guide/theming#using-component-color-variants) to learn more.) By default, the +datepicker uses the theme's primary palette. This can be changed to `'secondary'`, `'tertiary'`, or +`'error'`. ### Date validation @@ -165,9 +165,10 @@ In this example the user cannot select any date that falls on a Saturday or Sund dates which fall on other days of the week are selectable. Each validation property has a different error that can be checked: - * A value that violates the `min` property will have a `matDatepickerMin` error. - * A value that violates the `max` property will have a `matDatepickerMax` error. - * A value that violates the `matDatepickerFilter` property will have a `matDatepickerFilter` error. + +- A value that violates the `min` property will have a `matDatepickerMin` error. +- A value that violates the `max` property will have a `matDatepickerMax` error. +- A value that violates the `matDatepickerFilter` property will have a `matDatepickerFilter` error. ### Input and change events @@ -223,19 +224,15 @@ If your users need to compare the date range that they're currently selecting wi you can provide the comparison range start and end dates to the `mat-date-range-input` using the `comparisonStart` and `comparisonEnd` bindings. The comparison range will be rendered statically within the calendar, but it will change colors to indicate which dates overlap with the user's -selected range. +selected range. The comparison and overlap colors can be customized using the +`datepicker-date-range-colors` mixin. -Note that comparison and overlap colors aren't derived from the current theme, due -to limitations in the Material Design theming system. They can be customized using the -`datepicker-date-range-colors` mixin. - ```scss @use '@angular/material' as mat; -@include mat.datepicker-date-range-colors( - hotpink, teal, yellow, purple); +@include mat.datepicker-date-range-colors(hotpink, teal, yellow, purple); ``` ### Customizing the date selection logic @@ -276,10 +273,11 @@ month. If you want to make the calendar larger or smaller, adjust the width rath ### Internationalization Internationalization of the datepicker is configured via four aspects: - 1. The date locale. - 2. The date implementation that the datepicker accepts. - 3. The display and parse formats used by the datepicker. - 4. The message strings used in the datepicker's UI. + +1. The date locale. +2. The date implementation that the datepicker accepts. +3. The display and parse formats used by the datepicker. +4. The message strings used in the datepicker's UI. #### Setting the locale code @@ -402,12 +400,12 @@ The easiest way to ensure this is to import one of the provided date adapters: -*Please note: `provideNativeDateAdapter` is based off the functionality available in JavaScript's +_Please note: `provideNativeDateAdapter` is based off the functionality available in JavaScript's native [`Date` object](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Date). Thus it is not suitable for many locales. One of the biggest shortcomings of the native `Date` object is the inability to set the parse format. We strongly recommend using an adapter based on a more robust formatting and parsing library. You can use `provideMomentDateAdapter` -or a custom `DateAdapter` that works with the library of your choice.* +or a custom `DateAdapter` that works with the library of your choice._ These APIs include providers for `DateAdapter` and `MAT_DATE_FORMATS`. @@ -544,6 +542,7 @@ bootstrapApplication(MyApp, { ``` #### Highlighting specific dates + If you want to apply one or more CSS classes to some dates in the calendar (e.g. to highlight a holiday), you can do so with the `dateClass` input. It accepts a function which will be called with each of the dates in the calendar and will apply any classes that are returned. The return @@ -579,16 +578,15 @@ additional means of opening the pop-up, such as `MatDatepickerToggle`. The datepicker supports the following keyboard shortcuts: -| Keyboard Shortcut | Action | -|----------------------------------------|----------------------------| -| Alt + Down Arrow | Open the calendar pop-up | -| Escape | Close the calendar pop-up | - +| Keyboard Shortcut | Action | +| -------------------------------------- | ------------------------- | +| Alt + Down Arrow | Open the calendar pop-up | +| Escape | Close the calendar pop-up | In month view: | Shortcut | Action | -|---------------------------------------|------------------------------------------| +| ------------------------------------- | ---------------------------------------- | | Left Arrow | Go to previous day | | Right Arrow | Go to next day | | Up Arrow | Go to same day in the previous week | @@ -601,11 +599,10 @@ In month view: | Alt + Page Down | Go to the same day in the next year | | Enter | Select current date | - In year view: | Shortcut | Action | -|---------------------------------------|-------------------------------------------| +| ------------------------------------- | ----------------------------------------- | | Left Arrow | Go to previous month | | Right Arrow | Go to next month | | Up Arrow | Go up a row (back 4 months) | @@ -621,7 +618,7 @@ In year view: In multi-year view: | Shortcut | Action | -|---------------------------------------|-------------------------------------------| +| ------------------------------------- | ----------------------------------------- | | Left Arrow | Go to previous year | | Right Arrow | Go to next year | | Up Arrow | Go up a row (back 4 years) |