要禁用matDatepicker中的日期转型,可以使用DateAdapter中的format方法。可以扩展NativeDateAdapter并覆盖format()。以下是一个示例:
import { NativeDateAdapter} from '@angular/material/core';
import { MatDateFormats } from '@angular/material/core';
export class MyDateAdapter extends NativeDateAdapter {
format(date: Date, displayFormat: Object): string {
if (displayFormat === 'input') {
const day = date.getDate();
const month = date.getMonth() + 1;
const year = date.getFullYear();
return `${year}-${month}-${day}`;
}
return date.toDateString();
}
}
export const MY_DATE_FORMATS: MatDateFormats = {
parse: {
//不需要设置解析格式;
dateInput: null,
},
display: {
dateInput: 'input',
monthYearLabel: 'MM/YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
//添加到模块之后,可以使用它对matDatepicker的所有日期选项卡进行禁用。MatDatePicker中有一个“dateClass“选项,它可以使用matDatepicker的日历组件中的自定义函数来禁用特定日期。
@Component({
selector: 'app-my-component',
templateUrl: './my-component.component.html',
styleUrls: ['./my-component.component.css'],
providers: [
{ provide: DateAdapter, useClass: MyDateAdapter },
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
],
})
export class MyComponent {}
//在模板上设置日期className样式来禁用它
template:
ts:
dateClass() {
return (date: Date): MatCalendarCellCssClasses => {
const day = date.getDate();
// Disable 1st of