如何从材料日期选择器中删除禁用年份？

Question

对于材料日期选择器，我们可以使用属性 max 和 min 来设置可用年份的范围。 但是，它仍然显示一些不可用的年份。 有什么办法可以去掉那些年吗？ 需要从 98-09 中删除年份

Answer 1

有点hack，但是由于这都是HTML，您可以做的是创建一个自定义指令以从您的HTML中删除这些项目。

创建指令：

import {
  AfterViewInit,
  Directive,
  ElementRef,
  Renderer2
} from '@angular/core';
import { MatCalendarView, MatDatepicker } from '@angular/material/datepicker';

@Directive({
  selector: '[disabledDates]',
})
export class DisabledDates implements AfterViewInit {
  constructor(
    private ref: ElementRef,
    private datePicker: MatDatepicker<any>,
    private rn: Renderer2
  ) {}


  ngAfterViewInit() {
    console.log('datepicker: ', this.datePicker);

    this.datePicker._viewChanged = this.onChangesForPicker.bind(this);
  }

  private onChangesForPicker(view: MatCalendarView) {
    console.log('Simple changes: ', view == 'multi-year');

    if (view == 'multi-year') {
      let items = document.getElementsByClassName(
        'mat-calendar-body-cell mat-calendar-body-disabled'
      );

      let arrayOfItems = Array.from(items);
      if (arrayOfItems && arrayOfItems.length)
        arrayOfItems.forEach((x) => {
          this.rn.removeChild(this.ref, x);
        });
    }
  }
}

这样做是利用datePickers的_viewChanged的私有方法。 如果视图是multi-year类型，那么我们知道我们正在查看我们选择的可用年份。

然后它所做的是使用document ，它将获取 class 名称暗示它们被禁用的所有元素。 从那里它调用渲染器并告诉它从父组件中删除这些子组件。 在这种情况下，父组件是日期选择器。

在您的 HTML 中，您将通过将此指令应用于 mat-datepicker 本身来使用此指令，如下所示：

<mat-datepicker #picker disabledDates></mat-datepicker>

工作堆栈闪电战：

https://stackblitz.com/edit/angular-8dzujz?file=src/app/disabled-dates.directive.ts

编辑：Angular 中的指令是一个强大的工具，可帮助您创建各种自定义行为，以及扩展代码或利用您无法直接访问的单独组件的底层 HTML 的方法（例如：Mat Datepicker）

编辑2：

.bind(this)是必需的，因为在 JS 中this是一个非常奇怪和不幸的生物。 如果没有绑定，如果您尝试在该方法中调用可以使用this访问的元素，它将引发未定义的错误，因为它的this版本与属于指令本身的this不同。 因此，以这种方式绑定它使得任何时候我们在该方法中使用this （请注意，如果您不这样做，智能感知不会抱怨）是您指令的实际this 。