angular - 角度：MatDateRangeInput 过滤器

Question

我已经实现了 Angular Material Date 选择器，并希望过滤可以选择的日期。所以我希望用户选择一个日期，然后只能在开始日期后 21 天或更短的时间内进行。

我正在考虑有两个日期字段，但客户想要日期范围的外观。

但似乎 dateRange 没有过滤功能。我将如何处理这个问题？

Answer 1

所以我得到了一个简单的解决方案，我仍然允许用户选择超过 21 天，然后在第二个日期选择之后将其恢复为 21 天并将选择器设置为新的结束日期。

HTML 代码

    <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>

TS 代码

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;
  }
}