含mat-date-range-picker-actions时，如何实时获取选中日期？

我使用mat-date-range-picker日期范围选择器，希望在关闭日历前获取选中的日期。尝试过dateInput、dateChanges事件，但当代码中包含mat-date-range-picker-actions时，仅能在点击Apply按钮后获取到值。移除mat-date-range-picker-actions时上述事件可正常工作，但我需要保留该部分代码。

解决方案 #

核心思路是监听日期选择器内部的日期选中事件，绕过默认的Apply按钮触发逻辑。

方法1：利用MatDateRangePicker的selectedChanged事件 #

MatDateRangePicker自带的selectedChanged事件，无论是否存在操作栏，只要选中或修改了开始/结束日期就会触发。

实现步骤：

1. 在模板中为mat-date-range-picker绑定selectedChanged事件
2. 在组件类中实现事件处理函数，实时获取选中的日期范围

模板代码：

<mat-form-field appearance="fill">
    <mat-label>MAT-LABEL</mat-label>
    <mat-date-range-input [rangePicker]="rangePicker">
      <input matStartDate />
      <input matEndDate />
    </mat-date-range-input>
    <mat-datepicker-toggle matSuffix [for]="rangePicker"></mat-datepicker-toggle>
    <mat-date-range-picker #rangePicker (selectedChanged)="onDateSelected($event)">
      <mat-date-range-picker-actions>
          <div>
            <button mat-stroked-button color="primary" matDateRangePickerCancel>{{ cancel }}</button>
            <button mat-flat-button color="primary" matDateRangePickerApply>{{ apply }}</button>
          </div>
      </mat-date-range-picker-actions>
    </mat-date-range-picker>
  </mat-form-field>

组件类代码：

import { Component } from '@angular/core';
import { MatDateRangePicker, DateRange } from '@angular/material/datepicker';
// 根据你使用的日期适配器调整类型，比如用原生Date就替换成Date
import { Moment } from 'moment';

@Component({
  // 组件元数据
})
export class YourComponent {
  onDateSelected(range: DateRange<Moment>) {
    // 实时获取选中的日期
    console.log('选中的开始日期:', range.start);
    console.log('选中的结束日期:', range.end);
    // 这里可以添加你的实时处理逻辑，比如更新页面预览、过滤数据等
  }
}

注意事项 #

• selectedChanged会在每次修改日期时触发，包括仅选中开始日期的情况（此时range.end为null），需要根据业务需求处理这种半选状态
• 如果使用Angular Material默认的原生Date适配器，将DateRange<Moment>替换为DateRange<Date>即可

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