要禁用Angular Material 7日期选择器中的多年视图,您可以使用MatCalendarHeader组件的yearEnabled属性。以下是一个示例代码,演示如何禁用多年视图:
npm install @angular/material @angular/cdk
import { Component } from '@angular/core';
import { MatCalendarHeader } from '@angular/material/datepicker';
import { Directionality } from '@angular/cdk/bidi';
import { MatDatepickerIntl } from '@angular/material/datepicker';
import { Subject } from 'rxjs';
@Component({
selector: 'custom-calendar-header',
template: `
`,
styleUrls: ['./custom-calendar-header.component.scss']
})
export class CustomCalendarHeaderComponent implements MatCalendarHeader {
calendar: any;
periodButtonText: string;
constructor(public datepickerIntl: MatDatepickerIntl, private directionality: Directionality) {}
ngOnInit() {
this.periodButtonText = this.datepickerIntl.switchToMonthViewLabel;
}
}
export class CustomDatepickerIntl extends MatDatepickerIntl {
switchToMultiYearViewLabel = '';
}
export class AppComponent {
customHeaderComponent = CustomCalendarHeaderComponent;
datepicker = new Subject();
constructor(private datepickerIntl: MatDatepickerIntl) {
this.datepickerIntl = new CustomDatepickerIntl();
}
}
通过执行这些步骤,您将能够禁用Angular Material 7日期选择器的多年视图。