Question

我正在使用@ angular / material ^ 7.0.0-rc.0中的MatDatepicker，我制作了一个稍微复杂的过滤器，用于比较时间选择器中的每个可见日期与数组中包含200或300个值的每一天。每次我将日期选择器切换到多年视图模式时，都会破坏应用程序。

我只想禁用或禁止使用多年视图模式，而只允许月份模式和年份模式工作。

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.材料手册上没有找到任何可以帮助我的东西。希望任何人都可以！

非常感谢！

Answer 1

您可以传递自定义组件作为日历标题，这将允许您覆盖当前允许用户选择多年视图的按钮。

此示例无法选择多年。

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：禁用多年视图

1 个答案: