在Angular Material中,可以使用MatDatePicker
来创建一个日期选择器。要配置日期选择器显示时间,需要使用MatDatetimepicker
。
以下是一个示例,演示如何配置Angular Material日期选择器以显示时间:
首先,确保已经安装并配置了Angular Material。可以通过运行以下命令来安装Angular Material:
ng add @angular/material
在需要使用日期选择器的组件中,引入相关的Angular Material模块:
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
在@NgModule
装饰器的imports
数组中,导入上述模块:
@NgModule({
imports: [
// ...
MatDatepickerModule,
MatNativeDateModule,
MatDatetimepickerModule,
MatNativeDatetimeModule
],
// ...
})
export class YourModule { }
在HTML模板中,使用matDatetimepicker
指令来创建日期选择器,并将matDatetimepickerToggle
指令绑定到一个按钮上:
在组件的TS文件中,可以使用@ViewChild
装饰器来获取日期选择器的引用,并设置时间格式:
import { ViewChild } from '@angular/core';
import { MatDatetimepicker } from '@mat-datetimepicker/core';
export class YourComponent {
@ViewChild(MatDatetimepicker) picker: MatDatetimepicker;
ngAfterViewInit() {
this.picker.picker.setFilterMinMax(moment().subtract(1, 'years'), moment().add(1, 'years'));
this.picker.picker.select(moment());
}
}
这样,就可以在日期选择器中显示时间,并根据需要进行配置。