如何为Angular Material 14日期选择器添加「今日」按钮并处理日期变更

问题场景 #

使用Angular Material 14日期选择器时，需要实现两个核心需求：

• 在日期选择器弹窗底部添加「今日」按钮，点击后将选中日期设为今日、关闭弹窗并同步更新输入框内容
• 选择任意其他日期时，日期选择器自动关闭原有弹窗

当前编写的HTML代码虽能显示「今日」按钮，但因手动替换了内部的mat-calendar组件，破坏了日期选择器的默认dateChange事件关联，导致默认功能异常。现有代码如下：

<input matInput [matDatepicker]="picker" [(ngModel)]="value" (dateChange)="closeDatepicker()">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
    <mat-datepicker #picker (closed)="closeDatepicker()">
        <mat-calendar (selectedChange)="dateSelected($event)"></mat-calendar>
        <mat-datepicker-actions>
            <button mat-button color="primary" (click)="onToday()">Today</button>
        </mat-datepicker-actions>
   </mat-datepicker>

解决方案 #

问题核心在于手动替换mat-datepicker内部的mat-calendar组件，破坏了组件默认的事件绑定逻辑。正确做法是保留日期选择器的原生结构，仅通过mat-datepicker-actions扩展「今日」按钮，并在TS中实现对应逻辑。

1. 修正HTML结构 #

移除手动添加的mat-calendar，保留日期选择器的默认结构，同时添加「今日」按钮：

<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker>
  <mat-datepicker-actions>
    <button mat-button color="primary" (click)="selectToday(picker)">今日</button>
  </mat-datepicker-actions>
</mat-datepicker>

2. 实现组件TS逻辑 #

在组件类中编写selectToday方法，通过MatDatepicker实例的close()方法关闭弹窗；Angular Material日期选择器默认会在选择日期后自动关闭，无需额外处理：

import { Component } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';
import { DateAdapter } from '@angular/material/core';

@Component({
  selector: 'app-date-picker-example',
  templateUrl: './date-picker-example.component.html',
  styleUrls: ['./date-picker-example.component.css']
})
export class DatePickerExampleComponent {
  selectedDate: Date | null = null;

  constructor(private dateAdapter: DateAdapter<Date>) {}

  selectToday(picker: MatDatepicker<Date>) {
    const today = this.dateAdapter.today();
    this.selectedDate = today;
    picker.close();
  }
}

关键说明 #

• 保留日期选择器原生结构，不手动替换mat-calendar，确保默认的dateChange事件和自动关闭行为正常生效
• 通过DateAdapter的today()方法获取当前日期，保证与Angular Material的日期处理逻辑一致
• 调用MatDatepicker实例的close()方法，实现点击「今日」按钮后弹窗关闭的需求

内容的提问来源于stack exchange，提问作者Vayas Zsolt Marton