Angular: MatDateRangeInput Filter

Question

I have implemented the Angular Material Date picker, and wish to filter the days that can be picked. So I want the user to select a date then only be able a range of 21 days after the start date or less.

I was considering to have two date fields, but the client wants the date range look and feel.

But it seems like the dateRange does not have the filter function. How would i approach this?

Answer 1

So I got a simple solution, Where i still allowed the user to select more than 21 days, then after the second date selection just bring it back to 21 days and set the selector to the new end date.

The HTML code

    <mat-date-range-input  [min]="minDate" [max]="maxDate"  [rangePicker]="picker"   >
      <input matStartDate placeholder="Start date" formControlName="checkin">
      <input matEndDate  placeholder="End date" formControlName="checkout" [ngModel]="calculateDays()">
    </mat-date-range-input>

The TS code

calculateDays(): void{
let days = (this.searchForm.value.checkout - this.searchForm.value.checkin) / 86400000;
if(days > 21){
  this.searchForm.value.checkout = new Date(this.searchForm.value.checkin);
  this.searchForm.value.checkout.setDate(this.searchForm.value.checkout.getDate() + 21);
    this.searchForm.controls.checkout.patchValue(this.searchForm.value.checkout);
    days = 21;
  }
  if(days > 0){
    this.days = days;
  }
}