下面是一个使用Angular Material中的日期选择器来实现自动选择0到1日期范围的示例代码:
在HTML模板中,使用mat-date-range-picker
指令创建日期选择器,并绑定到一个变量dateRange
上:
在组件的Typescript代码中,定义dateRange
变量并初始化为一个日期范围对象,包含一个起始日期和结束日期:
import { Component } from '@angular/core';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
dateRange: { start: Date, end: Date } = { start: null, end: null };
}
接下来,我们需要在组件的ngOnInit
生命周期钩子中自动选择0到1日期范围。在这个钩子中,我们可以使用Date
对象的setDate()
方法来设置日期。
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent implements OnInit {
dateRange: { start: Date, end: Date } = { start: null, end: null };
ngOnInit() {
const today = new Date();
this.dateRange.start = new Date(today.getFullYear(), today.getMonth(), today.getDate());
this.dateRange.end = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
}
}
这样,当组件初始化时,日期选择器将自动选择0到1日期范围。