有条件地在 mat datepicker 中禁用日期答案

【问题标题】：Disable date in mat datepicker conditionally有条件地在 mat datepicker 中禁用日期
【发布时间】：2020-03-14 00:05:06
【问题描述】：

我在 Angular 7 项目中使用 Angular 材质日期选择器。我想在某些条件下使日期选择器只读。例如。如果日期大于当前日期，我想让 datepicker 只读而不让用户更改日期。

我试过 this.disableDate = true;然后尝试了 [readonly] 属性，还尝试了 disabled 属性，但它不起作用。我怎样才能做到这一点？

【问题讨论】：

请提供您尝试过的代码 sn-p。

标签： angular angular-material

【解决方案1】：

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

<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>

【讨论】：

这是我的代码，但它不起作用：

【解决方案2】：

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>

【讨论】：

嗨 Mamta，我不想禁用未来的日期。我不希望用户在特定条件下更改日期，所以我想在特定条件下禁用日历。
在这种情况下，如果您已经具备该条件，则可以使用 [disable]="your condition" 或者如果您希望用户选择某个日期的情况下您想要执行一些操作而不是您可以执行的操作使用日期选择器的 dateChange 属性
@YogeshMali 我已经更新了禁用日期的 stackblitz 代码。请检查
谢谢Mamta，你能分享一下代码吗，我没看到。另外我正在寻找的是禁用选择日期的选项。