NG-ZORRO日期选择器：基于Issue Date禁用Delivery Date过往日期

1. 修改模板HTML #

给delivery_date对应的日期选择器添加nzDisabledDate属性，绑定自定义过滤方法：

<div class="col-sm-6 col-md-3 form-group">
  <div class="label-mini">
    <span>Issue Date</span>
  </div>
  <nz-date-picker nzSize="large" nzPlaceHolder="Choose a date" formControlName="issue_date">
  </nz-date-picker>
</div>

<div class="col-sm-6 col-md-3 form-group">
  <div class="label-mini">
    <span>Delivery Date</span>
  </div>
  <nz-date-picker
    nzSize="large"
    nzPlaceHolder="Choose a date"
    formControlName="delivery_date"
    [nzDisabledDate]="disabledDeliveryDate"
    >
  </nz-date-picker>
</div>

2. 处理组件TS逻辑 #

在组件类中实现日期过滤方法，实时基于issue_date的值限制可选范围：

initializeForm() {
  this.purchaseOrderForm = new FormGroup({        
    issue_date: new FormControl(new Date().toISOString()),
    delivery_date: new FormControl('', Validators.compose([
      Validators.required,
    ])),
  });
}

// 过滤Delivery Date不可选日期的方法
disabledDeliveryDate = (current: Date): boolean => {
  // 获取issue_date的表单值，转成标准Date对象
  const issueDate = new Date(this.purchaseOrderForm.get('issue_date')?.value || new Date());
  // 统一时间部分为0，避免时分秒差异导致的判断误差
  const normalizedIssueDate = issueDate.setHours(0, 0, 0, 0);
  // 返回true表示禁用该日期：当前日期早于issue_date时禁用
  return current < normalizedIssueDate;
};

关键说明 #

• nzDisabledDate方法接收待判断的日期，返回true则标记该日期不可选
• 无需额外订阅issue_date的变化，NG-ZORRO会自动检测表单值更新并重新执行过滤方法
• 初始状态下issue_date默认是当前日期，Delivery Date会自动禁用当前日期之前的所有选项

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