您可以使用[startAt]属性来设置mat-datepicker的起始日期,并通过设置一个最小日期来禁止选择今天之前的日期。以下是一个示例代码:
HTML模板:
TypeScript:
import { Component } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
startAt = new Date();
minDate = new Date();
constructor() {
// 设置最小日期为今天
this.minDate.setDate(this.startAt.getDate());
}
// 选择日期时触发事件
dateChanged(event: MatDatepickerInputEvent) {
const selectedDate = event.value;
if (selectedDate < this.minDate) {
// 如果选择的日期在最小日期之前,则重置选择的日期为最小日期
event.source._datepickerInput.setValue(this.minDate);
event.source._elementRef.nativeElement.value = this.minDate.toLocaleDateString();
}
}
}
在上面的代码中,我们使用[startAt]属性将mat-datepicker的起始日期设置为当前日期。然后,我们使用[min]属性将输入框的最小日期设置为当前日期。在选择日期时,我们使用[dateChanged]事件来检查选择的日期是否在最小日期之前,如果是,则重置选择的日期为最小日期。
请注意,上述代码需要使用Angular Material库,并将其导入到您的应用程序中。确保您已正确安装和导入所需的模块和组件。