angular - 如何根据其他两个日期选择器字段在日期选择器字段上设置最小值和最大值 - 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] 绑定(bind)添加到输入:

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

然后向您的组件添加一个验证函数(请注意，这是一个 lambda 而不是成员函数，请在此处阅读更多信息 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] 绑定(bind)添加到输入:

<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 是一个确保我们正在处理 Date 对象的函数。根据文档，没有它应该可以正常工作。我添加它以防万一。如果需要，这是实现:

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