如何在迄今為止的日期之間禁用 angular 材料日期選擇器

Question

我想在兩個日期之間禁用選定的 angular 材料。 例如，用戶不能選擇2021-03-02和2011-03-02之間的任何日期。

我寫了這段代碼：

 <input matInput [max]="maxDate" [min]="minDate" [matDatepicker]="picker6"/>

maxDate = new Date();
minDate =new Date().setFullYear(this.maxDate.getFullYear() - 10) 

但它沒有奏效。

演示

有什么問題？ 我該如何解決這個問題？？？

Answer 1

請將您的 html 文件替換為以下文件

your.component.html

<mat-form-field>
    <mat-label>Choose Start date</mat-label>
    <input matInput [max]="unavailabilityForm.controls.startDate.value" [matDatepicker]="picker1" />
    <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass" #picker1></mat-datepicker>
</mat-form-field>

<mat-form-field class="example-full-width" appearance="fill">
    <mat-label>Choose End date</mat-label>
    <input matInput [min]="unavailabilityForm.controls.endDate.value" [matDatepicker]="picker" />
    <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker [dateClass]="dateClass" #picker></mat-datepicker>
</mat-form-field>

你的.component.ts

import { Component, OnInit, ViewEncapsulation } from "@angular/core";
import { FormBuilder } from "@angular/forms";

/** @title Datepicker with custom date classes */
@Component({
  selector: "datepicker-date-class-example",
  templateUrl: "datepicker-date-class-example.html",
  styleUrls: ["datepicker-date-class-example.css"],
  encapsulation: ViewEncapsulation.None
})
export class DatepickerDateClassExample implements OnInit {
  unavailabilityForm: any;
  maxDate = new Date();

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    let startDateTimeStamp = new Date().setFullYear(new Date().getFullYear() - 10);
    this.unavailabilityForm = this.formBuilder.group({
      startDate: [new Date(startDateTimeStamp)],
      endDate: [new Date()]
    });
  }
}

它將解決您的擔憂。