Angular 带范围选择的角度材质日期选择器

我正在使用angular 8，我想实现一个突出显示daterage的datepicker： 我在找这样的包裹： 不幸的是，它已被弃用，目前我找不到其他类似的。

---

你知道我的目的吗？多谢各位

在物料日期选择器中，您可以定义最大值和最小值

例如：

example.hml

示例1.ts

minValue=新日期（）
maxValue=newdate（）

重要更新，我的好！！谷歌有很多像我一样的控件！（记住：谷歌是我的朋友，谷歌是我的朋友…）

我正在制作一个日期选择器系列，我会试着在之后解释

更新我改进了stackblitz并做了简要说明

mat date picker有一点很重要，即不可能创建日模板。因此，有必要使用RenderR2添加侦听器、添加类或删除类。我需要使用document.queryselectoral，因为它在中显示

其思想是，在选定的单元格中创建一个对象数组

{
   date: //will be a getTime of the date,
   element: //will be the nativeElement x,
   change: //a boolean to indicate this cell has an aditional class
   x.listen: //the listener added to allow us remove the listener
}

还有一个函数，它帮助我们根据两个变量添加/删除类：this.\u dateTo和另一个变量this.\u dateFrom或另一个变量（早期我们发现了原因）

我喜欢创建一个自定义组件。这允许我们在mat form字段中使用组件，例如

<mat-form-field class="full-width" >
  <mat-label>Select dates</mat-label>
  <date-picker-range [formControl]="control" placeholder="DD/MM/YYYY"  ></date-picker-range>
  <mat-error>required</mat-error>
</mat-form-field>


选择日期
必修的

并允许例如us使用[disabled]禁用formControl，标签将像另一个mat输入一样移动。为此，我们需要添加一些函数，请参见（我保证这是最后一个）

注意：该控件是“原样”的，没有任何担保，并且允许：对其进行批评、改进、修改、使用或将其作为坏示例使用。
在角度材质中，可以选择指定范围


输入日期范围


  setCells() {
    setTimeout(() => {
      if (this.cells) {
        this.cells.forEach(x => {
          x.listen();  //<---remove the listener
        });
      }
      this.dateOver = null;
      //get the elements
      let elements = document.querySelectorAll(".calendar");
      if (!elements || elements.length == 0) return;
      const cells = elements[0].querySelectorAll(".mat-calendar-body-cell");
      this.cells = [];
      //with each element we fill our array "this.cells"
      cells.forEach((x, index) => {
        const date = new Date(x.getAttribute("aria-label"));
        const time=new Date(date.getFullYear() +"-" +(date.getMonth() + 1) +
              "-" +date.getDate()).getTime()

        this.cells.push({
          date: time,
          element: x,
          change:time>=this._dateFrom && time<=this._dateTo
        });
      });
      this.cells.forEach(x => {
        if (!x.listen) {
          //we add a listener "mouseover"
          x.listen = this.renderer.listen(x.element, "mouseover", () => {
            if (!this._dateTo && this.dateOver != x.date) {
              this.dateOver = x.date;
              this.redrawCells(this.dateOver); //who call to redrawCells
            }
          });
        }
      });
    });
  }

  select(date: any) {
    date = new Date(
      date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate()
    );
    if (
      !this.from.value ||
      (this.from.value && this.to.value) ||
      this._dateFrom > date.getTime()
    ) {
      this.dateFrom = date;
      this.dateTo = null;
      this.redrawCells(date.getTime());
    } else {
      this.dateTo = date;
      this.trigger.closeMenu();
    }
  }

<mat-form-field class="full-width" >
  <mat-label>Select dates</mat-label>
  <date-picker-range [formControl]="control" placeholder="DD/MM/YYYY"  ></date-picker-range>
  <mat-error>required</mat-error>
</mat-form-field>

<mat-form-field appearance="fill">
  <mat-label>Enter a date range</mat-label>
  <mat-date-range-input [rangePicker]="picker">
    <input matStartDate placeholder="Start date">
    <input matEndDate placeholder="End date">
  </mat-date-range-input>
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-date-range-picker #picker></mat-date-range-picker>
</mat-form-field>