如何根據其他兩個 Datepicker 字段在 Datepicker 字段上設置 Min 和 Max 值 - Angular Material

Question

我有 3 個日期選擇器字段，contractPeriodFrom、contractPeriodTo 和 dateOfAppointment。 dateOfAppointment 應該在contractPeriodFrom 和contractPeriodTo 之間。 我不確定如何執行此操作，因為兩個 contractPeriod 字段都是表單控件。

        <div fxLayout="row">
            <mat-form-field fxFlex="50">
                <input matInput [matDatepicker]="picker2" formControlName="contractPeriodFrom" readonly>
                <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
                <mat-datepicker #picker2></mat-datepicker> 
            </mat-form-field>
            <mat-form-field fxFlex="50">
                <input matInput [matDatepicker]="picker3" formControlName="contractPeriodTo" readonly>
                <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
                <mat-datepicker #picker3></mat-datepicker> 
            </mat-form-field>
        </div>
        <div fxLayout="row" class="mt-16">
            <mat-form-field fxFlex="50">
                <input matInput [matDatepicker]="picker1" formControlName="dateOfAppointment" readonly>
                <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
                <mat-datepicker #picker1></mat-datepicker> 
            </mat-form-field>
        </div>

表單域是表單組的一部分，初始化如下 -

    this.lieUpdateForm = this._formBuilder.group({
        dateOfAppointment: [this.selectedLIE.dateOfAppointment || ''],
        contractPeriodFrom: [this.selectedLIE.contractPeriodFrom || ''],
        contractPeriodTo: [this.selectedLIE.contractPeriodTo || ''],
    }); 

Answer 1

看看這里https://material.angular.io/components/datepicker/overview#date-validation 。 有兩種解決方案min/max或matDatepickerFilter 。 我建議您使用matDatepickerFilter之一，它更干凈、更靈活，並且不需要訂閱valueChanges 。

matDatepickerFilter

將[matDatepickerFilter]綁定添加到輸入：

<input matInput
       [matDatepicker]="picker1"
       formControlName="dateOfAppointment" readonly
       [matDatepickerFilter]="dateFilter"
>

Then add a validation function to your component (note that is a lambda and not a member function, read more here MatDatepickerFilter - Filter function can't access class variable )

public dateFilter = (d: Date): boolean => {
  const value = this.lieUpdateForm.value;
  return (d >= this.toDate(value.contractPeriodFrom)) && (d <= this.toDate(value.contractPeriodTo));
}

min/max

將[min]和[max]綁定添加到輸入：

<input matInput
       [matDatepicker]="picker1"
       formControlName="dateOfAppointment" readonly
       [min]="minDate" [max]="maxDate"
>

然后在分配lieUpdateForm之后添加：

this._subscription = this.lieUpdateForm
  .valueChanges.subscribe(value => {
  this.minDate = toDate(value.contractPeriodFrom);
  this.maxDate = toDate(value.contractPeriodTo);
});

不要忘記清除_subscription onDestroy

toDate

toDate是一個 function 確保我們正在處理 Date 對象。 根據文檔，沒有它它應該可以正常工作。 我添加它以防萬一。 如果需要，這是實現：

protected toDate(d: Date | string): Date {
  return (typeof d === 'string') ? new Date(d) : d;
}

Answer 2

<input matInput [min]="minDate" [max]="maxDate" [matDatepicker]="picker" placeholder="Choose a date">

然后您可以在 ts 文件中設置 maxDate 和 minDate 的值

this.lieUpdateForm.get("dateOfAppointment").valueChanges.subscribe(selectedValue => {
  console.log('dateOfAppointment value changed')
  console.log(selectedValue)                              //latest value of dateOfAppointment
  console.log(this.lieUpdateForm.get("dateOfAppointment").value)   //latest value of dateOfAppointment
})

Answer 3

但是，接受的答案有一個缺陷，當使用 matDateFilter 時，性能會受到嚴重影響。 我知道 filterFunction 中的邏輯是這樣編寫的，它必須執行最少的時間，但是如果沒有提供第一個日期並且用戶想要在返回 false 時禁用年份看起來像它遞歸地檢查內部日期以及哪個讓它被執行很多次