有条件地禁用日期选择器中的日期

Question

我正在一个角度为7的项目中使用角度材质datepicker。我想在某些情况下将datepicker设为只读。例如。如果该日期大于当前日期，我希望将日期选择器设置为只读，而不允许用户更改日期。

我尝试过this.disableDate = true;然后尝试[readonly]属性，还尝试了Disabled属性，但是它不起作用。我该如何实现？

Answer 1

不确定如何应用禁用的属性，但是如果将其应用于输入，它应该可以工作。 mat-datepicker使用具有matInput属性的disabled。您可以根据条件绑定属性。条件满足输入条件后，日期选择器图标和输入字段将被禁用。

<mat-form-field>
  <input matInput [matDatepicker]="picker" [disabled]="true">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>

Answer 2

嗨，据我所知，您想在日历中禁用以后的日期。

[请检查下面的链接是否

https://stackblitz.com/edit/angular-lp5jtw

DatePiecker具有max属性，您可以将其设置为所需的任何值

组件

maxDate = new Date(); 

Template.html

<mat-form-field>
  <input matInput [matDatepicker]="picker" [max]="maxDate">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker></mat-datepicker>
</mat-form-field>