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

角度：MatDateRangeInput过滤器

1 个答案: