Angular Material 7 Datepicker:禁用多年视图 [英] Angular Material 7 Datepicker: Disable multi year view
问题描述
我正在使用@ angular/material ^ 7.0.0-rc.0中的MatDatepicker,我制作了一个稍微复杂的过滤器,将时间选择器中的每个可见日期与数组的每一天进行比较,该数组的每一天都有大约200或300个值.每次我将日期选择器切换到多年视图模式时,都会破坏应用程序.
I'm using the MatDatepicker from @angular/material ^7.0.0-rc.0, and I made a little complex filter that compares every visible day in the timepicker with every day of an array with about 200 or 300 values. It breaks the aplication every time I switch the datepicker to multi-year view mode.
我只想禁用或禁止使用多年视图模式,而只允许月份模式和年份模式工作.
I just want to disable or disallow the multi-year view mode, and let only month mode and year mode working.
HTML:
<mat-form-field (click)="picker.open()" class="date-field">
<span>{{(dataFields['mosaic_'+REPORT_STAGES.PLANTING]['value'] | date: 'dd/MM/yyyy') || 'Não plantou'}}</span>
<input matInput hidden [matDatepicker]="picker" placeholder="" [(value)]="dataFields['mosaic_'+REPORT_STAGES.PLANTING]['value']" (dateChange)="plantingDateChange($event)" [matDatepickerFilter]="datePickerFilter.bind(this)">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
我的过滤方法:
datePickerFilter(d: Date): boolean {
const dAsDate = this.datePipe.transform(d, 'dd-MM-yyyy');
const validDates = this.allowedDays.filter(e => {
const eAsDate = this.datePipe.transform(new Date(e), 'dd-MM-yyyy');
return eAsDate === dAsDate;
});
console.log(validDates);
return (validDates.length > 0);
}
我在A.材料手册上没有找到任何可以帮助我的东西.希望任何人都可以!
I don't found anything on A. Material manual that can helps me. Hope anyone can!
非常感谢!
推荐答案
您可以传递自定义组件作为日历标题,这将允许您覆盖当前允许用户选择多年视图的按钮.
You can pass a customized component as the calendar header, this will allow you to override the button currently allowing the user to select multi year view.
此示例无法选择多年.
https://material.angular.io/components/datepicker/overview#customizing-the-calendar-header
HTML
引用mat-datepicker
<mat-datepicker #picker [calendarHeaderComponent]="exampleHeader"></mat-datepicker>
这篇关于Angular Material 7 Datepicker:禁用多年视图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!