日期选择器是在 Web 应用程序中常见的元素之一，Angular Material 提供了一个简单易用的日期选择器组件。本文将详细介绍 Angular Material 中的日期选择器，包括其使用方法、属性和事件等。
安装
在使用 Angular Material 中的日期选择器之前，需要先安装 Angular Material 模块。可以通过 npm 安装：
npm install --save @angular/material @angular/cdk @angular/animations
使用
在使用日期选择器之前，需要在应用程序的模块中导入 MatDatepickerModule 模块。例如：
// www.javascriptcn.com code example
import { MatDatepickerModule } from '@angular/material/datepicker';
@NgModule({
imports: [
MatDatepickerModule
],
// ...
})
export class AppModule { }在 HTML 中使用日期选择器：
<mat-form-field> <input matInput [matDatepicker]="picker" placeholder="选择日期"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
在上面的示例中，mat-form-field 是 Angular Material 中的表单域组件，matInput 是一个输入框组件，mat-datepicker-toggle 是一个日期选择器的切换按钮，mat-datepicker 是日期选择器组件。
属性
日期选择器组件有以下属性：
@Input() color: ThemePalette：日期选择器的主题色彩，可选值为 primary、accent 或 warn。@Input() disabled: boolean：是否禁用日期选择器。@Input() id: string：日期选择器的 ID。@Input() max: D：日期选择器可选择的最大日期，D 表示 Date 类型。@Input() min: D：日期选择器可选择的最小日期，D 表示 Date 类型。@Input() startAt: D：日期选择器的起始日期，D 表示 Date 类型。@Input() touchUi: boolean：是否开启触摸屏 UI。
事件
日期选择器组件有以下事件：
@Output() closed: EventEmitter<void>：日期选择器关闭时触发的事件。@Output() opened: EventEmitter<void>：日期选择器打开时触发的事件。@Output() selected: EventEmitter<MatDatepickerInputEvent<D>>：选择日期时触发的事件。
示例代码
下面是一个完整的日期选择器示例代码：
<mat-form-field> <input matInput [matDatepicker]="picker" placeholder="选择日期"> <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle> <mat-datepicker #picker></mat-datepicker> </mat-form-field>
// www.javascriptcn.com code example
import { Component } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
selectedDate: Date | null = null;
onDateSelected(event: MatDatepickerInputEvent<Date>) {
this.selectedDate = event.value;
}
}在上面的示例中，DatePickerComponent 组件包含一个日期选择器，当用户选择日期时，onDateSelected 方法会被调用，将选择的日期保存在 selectedDate 变量中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d32930a941bf71345f81f9