Angular Material如何基于另外两个Datepicker设置日期选择器的最值

1. 修改模板代码 #

MatDatepicker 原生提供[min]和[max]属性用来限制可选日期，直接给dateOfAppointment对应的 input 绑定同表单组下的合同起止日期控件值即可，UI层面会自动禁用区间外的日期：

<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" 
        [min]="lieUpdateForm.get('contractPeriodFrom').value" 
        [max]="lieUpdateForm.get('contractPeriodTo').value" readonly>
        <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
        <mat-datepicker #picker1></mat-datepicker> 
        <!-- 可选：错误提示 -->
        <mat-error *ngIf="lieUpdateForm.get('dateOfAppointment').hasError('dateOutOfRange')">
            预约日期需在合同有效期内
        </mat-error>
    </mat-form-field>
</div>

2. 补充表单校验逻辑（可选但推荐） #

仅靠UI层限制无法避免代码赋值或极端场景下的非法值，建议添加自定义表单验证：
首先新增自定义验证器：

import { AbstractControl, ValidationErrors } from '@angular/forms';

// 自定义验证器：校验日期是否在合同区间内
export function appointmentDateValidator(control: AbstractControl): ValidationErrors | null {
  const parentForm = control.parent;
  if (!parentForm) return null;
  const appointDate = control.value;
  const from = parentForm.get('contractPeriodFrom')?.value;
  const to = parentForm.get('contractPeriodTo')?.value;
  if (!appointDate || !from || !to) return null;
  return appointDate >= from && appointDate <= to ? null : { dateOutOfRange: true };
}

修改表单初始化代码，添加验证规则和变更监听：

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

// 监听合同起止日期变化，触发预约日期重新校验
this.lieUpdateForm.get('contractPeriodFrom').valueChanges.subscribe(() => {
  this.lieUpdateForm.get('dateOfAppointment').updateValueAndValidity();
});
this.lieUpdateForm.get('contractPeriodTo').valueChanges.subscribe(() => {
  this.lieUpdateForm.get('dateOfAppointment').updateValueAndValidity();
});

注意事项 #

• 需确保三个日期控件的日期类型一致（如都是Date对象或都是Moment对象），避免min/max判断失效
• 如果合同起止日期可空，可以根据业务需求调整min/max的默认值，比如from为空时min设为null，to为空时max设为null

内容的提问来源于stack exchange，提问作者gguptha