Search code examples
angulardatepickerangular8uidatepickerangular-ui-datepicker

Angular- Date Picker disable validations


I am using angular8.

I have date picker from date , To date , renewal date. If I select from date and To date then renewal date will be the inbetween the from date and To date. In this the remaining date will be disable in date picker for renewal 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>

For example :

  • From date 01/01/2050
  • To date 05/01/2050
  • If I click the date picker in renewal date 02, 03, 04/01/2050 only have to enable in date picker.

I am facing this problem. Help me to solve this condition....


Solution

  • You can set max date and min date validations in html