如何根据其他两个日期选择器字段在日期选择器字段上设置最小值和最大值 - 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

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

看这里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"
>

然后向您的组件添加一个验证函数（请注意，这是一个 lambda 而不是成员函数，请在此处阅读更多内容）

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

别忘了清除_subscriptiononDestroy

`toDate`

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

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

如何根据其他两个日期选择器字段在日期选择器字段上设置最小值和最大值 - Angular Material

How do I set Min and Max values on a Datepicker field based on two other Datepicker fields - Angular Material

angular

angular-material-7

`matDatepickerFilter`

`min/max`

`toDate`