Angular 8日期选择器：限制Renewal Date为Start/End Date区间内日期

嗨，这个需求很常见，用Angular Material的matDatepickerFilter就能轻松搞定！下面分步骤给你实现方案：

1. 模板修改：添加日期过滤属性 #

给续约日期的<mat-datepicker>绑定过滤函数，同时确保你的表单是用响应式表单实现的（从你代码里的formControlName来看已经是了）：

<mat-form-field style="width:175px; margin-left: 50px;">
 <mat-label>Start Date</mat-label>
 <input matInput readonly [matDatepicker]="picker1" placeholder="Start Date" formControlName="start_date">
 <mat-datepicker-toggle matSuffix [for]="picker1"></mat-datepicker-toggle>
 <mat-datepicker #picker1></mat-datepicker>
</mat-form-field>
<mat-form-field style="width:175px; margin-left: 50px;">
 <mat-label>End Date</mat-label>
 <input matInput readonly [matDatepicker]="picker2" placeholder="End Date" formControlName="end_date">
 <mat-datepicker-toggle matSuffix [for]="picker2"></mat-datepicker-toggle>
 <mat-datepicker #picker2></mat-datepicker>
</mat-form-field>
<mat-form-field style="width:175px; margin-left: 50px;">
 <mat-label>Renewal Date</mat-label>
 <input matInput readonly [matDatepicker]="picker3" placeholder="Renewal Date" formControlName="renew_date"
        [matDatepickerFilter]="filterRenewalDate"> <!-- 新增过滤属性 -->
 <mat-datepicker-toggle matSuffix [for]="picker3"></mat-datepicker-toggle>
 <mat-datepicker #picker3></mat-datepicker>
</mat-form-field>

2. 组件类实现过滤逻辑 #

在你的组件.ts文件里，实现过滤函数，并监听起始/结束日期的变化，动态更新可选范围：

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { DateAdapter } from '@angular/material/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements OnInit {
  myForm: FormGroup;

  constructor(private fb: FormBuilder, private dateAdapter: DateAdapter<Date>) {
    // 确保日期格式统一，避免时区问题
    this.dateAdapter.setLocale('en-US');
  }

  ngOnInit(): void {
    // 初始化表单
    this.myForm = this.fb.group({
      start_date: [null],
      end_date: [null],
      renew_date: [null]
    });

    // 监听起始/结束日期变化，清空续约日期（可选，提升用户体验）
    this.myForm.get('start_date')?.valueChanges.subscribe(() => {
      this.myForm.get('renew_date')?.setValue(null);
    });
    this.myForm.get('end_date')?.valueChanges.subscribe(() => {
      this.myForm.get('renew_date')?.setValue(null);
    });
  }

  // 过滤续约日期的函数
  filterRenewalDate(date: Date): boolean {
    const startDate = this.myForm.get('start_date')?.value;
    const endDate = this.myForm.get('end_date')?.value;

    // 如果起始或结束日期未选，禁用所有日期
    if (!startDate || !endDate) {
      return false;
    }

    // 重置时间部分，避免时区/时分秒干扰比较
    const normalizedDate = new Date(date);
    normalizedDate.setHours(0, 0, 0, 0);
    const normalizedStart = new Date(startDate);
    normalizedStart.setHours(0, 0, 0, 0);
    const normalizedEnd = new Date(endDate);
    normalizedEnd.setHours(0, 0, 0, 0);

    // 只允许选择起始和结束日期之间的日期（不包含起止）
    return normalizedDate > normalizedStart && normalizedDate < normalizedEnd;
  }
}

关键说明 #

• matDatepickerFilter：这个属性接受一个函数，返回true表示日期可选，false表示禁用。
• 日期归一化：通过setHours(0,0,0,0)去掉时间部分，避免因为时区或者选择时的时分秒导致比较错误。
• 监听值变化：当起始/结束日期改变时，清空续约日期，避免用户保留之前不符合新范围的选择。
• 初始状态处理：如果起始或结束日期未选择，续约日期的所有选项都会被禁用，引导用户先完成前两个日期的选择。

按照这个代码实现后，当你选择Start Date为2050/01/01，End Date为2050/01/05时，Renewal Date的选择器只会启用2050/01/02、2050/01/03、2050/01/04这三天，完全符合你的需求！

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