Angular- Date Picker禁用验证

编程问答 2022-06-03

问题描述

我正在使用angular8。

我有date选择器，从date，到date，续订日期。如果我选择起始日期和截止日期，则续订日期将介于起始日期和截止日期之间。在此，剩余日期将在续订日期的日期选择器中被禁用。

<mat-form-field style="width:175px; margin-left: 50px;">
     <mat-label>Start Date</mat-label>
         <input matInput readonly [matDatepicker]="picker1" placeholder="Start Date" formControlName="start_date">
     <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
     <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>


<mat-form-field style="width:175px; margin-left: 50px;">
     <mat-label>End Date</mat-label>
         <input matInput readonly [matDatepicker]="picker2" placeholder="End Date" formControlName="end_date">
     <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
     <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>


<mat-form-field style="width:175px; margin-left: 50px;">
     <mat-label>renewal Date</mat-label>
         <input matInput readonly [matDatepicker]="picker3" placeholder="renewal Date" formControlName="renew_date">
     <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
     <mat-datepicker #picker3></mat-datepicker>
</mat-form-field>

例如：

  • 从日期01/01/2050起
  • 截至日期05/01/2050
  • 如果在续订日期02、03、04 / 01/2050中单击日期选择器，只需在日期选择器中启用。

我正面临这个问题。帮我解决这个问题。...

解决方法

您可以在html中设置最大日期和最小日期验证

angularangular8datepickerdatepickeruidatepicker