在物料日期范围选择器中禁用开始日期答案

【问题标题】：Disable Start Date in Material Date Range Picker在物料日期范围选择器中禁用开始日期
【发布时间】：2020-11-06 01:23:41
【问题描述】：

问题：我需要有条件地禁用开始日期的编辑。

按照文档Datepicker | angular Material

在特定情况下，我要求开始日期不可编辑。如果它在 2020 年 9 月 15 日通过，那么它需要保持这种状态。然而，当日历打开时，用户只需点击几下，开始日期就会改变。

提前感谢您的帮助

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我不知道我的解决方案是否对您有用。我使用了一个变量来保存开始日期和一个观察表单控件变化的函数。

 changeStartDate(){
  this.formEditOffer.get('dataRange').get('start').valueChanges.subscribe(data=> {
    if(data !== this.startDate){
      this.formEditOffer.get('dataRange').get('start').patchValue(this.startDate)
    }
  });
 }

【讨论】：

我确实在几个地方使用了这种类型的解决方案。谢谢。但是到目前为止，我只是使用 ngIf 在 Range Picker 的使用和 Date 选择器之间切换，因为它无法避免。不理想，但是是的。谢谢

【解决方案2】：

根据文档，您可以使用 disabled 属性禁用日期选择

<p>
  <mat-form-field appearance="fill">
    <mat-label>Completely disabled</mat-label>
    <input matInput [matDatepicker]="dp1" disabled>
    <mat-datepicker-toggle matSuffix [for]="dp1"></mat-datepicker-toggle>
    <mat-datepicker #dp1></mat-datepicker>
  </mat-form-field>
</p>

有了这个，您应该能够根据您需要的任何条件动态设置disabled 属性。即

<input matInput [matDatepicker]="dp1" [disabled]="ENTER YOUR CRITERIA HERE">

有了这个，您应该能够根据您的业务规则禁用输入

【讨论】：

这似乎禁用了输入文本部分，但是一旦打开日历，只需单击一个日期即可将禁用的输入设置为新值