Angular Material日期范围选择器重置按钮无法清除选中日期

问题描述 #

在Angular Material的日期范围选择器组件中添加自定义重置按钮后，点击按钮仅重置了底层绑定的模型值，但组件界面上的日期选中高亮状态并未同步清除。

复现步骤 #

• 打开日期范围选择器组件
• 选择任意日期范围
• 点击自定义添加的重置按钮
• 观察到绑定的日期模型已重置为空，但组件内选中的日期仍保持高亮状态

预期行为 #

点击重置按钮时，底层模型值被重置的同时，日期范围选择器组件应完全清除选中状态，恢复至初始未选择的状态。

实际行为 #

重置按钮点击后，模型值已成功重置，但组件界面上的日期选中高亮状态未同步清除。

环境信息 #

• Angular: ^19.0.0-next.2
• CDK/Material: ^19.0.0-next.2
• 浏览器: Chrome
• 操作系统: Windows、Ubuntu

解决方案 #

仅重置绑定的模型无法同步组件内部状态，需通过MatDateRangePicker实例的方法主动重置组件：

1. 模板中添加选择器引用 #

给日期范围选择器添加模板引用变量，用于在组件类中获取实例：

<mat-date-range-input [rangePicker]="datePicker">
  <input matStartDate placeholder="开始日期" formControlName="start">
  <input matEndDate placeholder="结束日期" formControlName="end">
</mat-date-range-input>
<mat-date-range-picker #datePicker></mat-date-range-picker>
<button (click)="resetDatePicker(datePicker)">重置</button>

2. 组件类中实现完整重置逻辑 #

在组件类里，同时重置表单模型和选择器组件状态：

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { MatDateRangePicker } from '@angular/material/datepicker';

@Component({
  selector: 'app-date-range-example',
  templateUrl: './date-range-example.component.html',
})
export class DateRangeExampleComponent {
  // 绑定的日期范围表单模型
  dateRangeForm = new FormGroup({
    start: new FormControl<Date | null>(null),
    end: new FormControl<Date | null>(null),
  });

  resetDatePicker(picker: MatDateRangePicker<Date>) {
    // 重置底层表单模型
    this.dateRangeForm.reset();
    // 调用选择器实例的reset方法清除界面选中状态
    picker.reset();
  }
}

若未使用表单控件而是直接绑定变量，需先将变量设为null，再调用picker.reset()：

startDate: Date | null = null;
endDate: Date | null = null;

resetDatePicker(picker: MatDateRangePicker<Date>) {
  this.startDate = null;
  this.endDate = null;
  picker.reset();
}

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