Angular MatDatepicker - How to make "from-to" validation between two datepickers?

312 Views Asked by At

I have two fields which are datepickers. The first represents the FROM date period and the second represents the TO date period. I use Angular MatDatepickers for this. How can I validate that the user cannot select a FROM date greater than TO date?

 <div class="row no-gutters">
              <div class="col">
                <div class="date-input">
                  <input class="datepicker form-control form-control-sm form-control-portal"
                         matInput
                         [matDatepicker]="creationDateFromPicker"
                         placeholder="from"
                         (click)="creationDateFromPicker.open()"
                         formControlName="createdDateFrom">
                  <mat-datepicker #creationDateFromPicker></mat-datepicker>
                </div>
              </div>
              <p class="ml-1 mr-1 mt-1">-</p>
              <div class="col">
                <div class="date-input">
                  <input class="datepicker form-control form-control-sm form-control-portal"
                         matInput
                         [matDatepicker]="creationDateToPicker"
                         placeholder="to"
                         (click)="creationDateToPicker.open()"
                         formControlName="createdDateTo">
                  <mat-datepicker #creationDateToPicker></mat-datepicker>
                </div>
              </div>
            </div>
          </div>
0

There are 0 best solutions below