Angular 13含mat-datepicker-actions时选日期自动关弹窗的实现

实现思路 #

当添加mat-datepicker-actions自定义按钮后，Datepicker会自动启用"需确认"模式，导致选中日期后无法自动关闭面板。要恢复默认的选中即关闭行为，需手动监听日期选择事件，主动触发面板关闭操作。

具体实现步骤 #

1. 模板层绑定事件与Datepicker实例 #

修改日期选择框模板，给mat-datepicker添加模板引用变量，同时给输入框绑定dateChange事件：

<mat-form-field>
  <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" (dateChange)="onDateSelected(picker)">
  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
  <mat-datepicker #picker>
    <mat-datepicker-actions>
      <button mat-button (click)="clearDate(picker)">清除</button>
      <button mat-button (click)="setInfinityDate(picker)">设置为无限期</button>
    </mat-datepicker-actions>
  </mat-datepicker>
</mat-form-field>

2. 组件层实现关闭逻辑 #

在组件的TypeScript文件中，导入MatDatepicker并实现日期选择后的关闭方法：

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

// 组件类内的方法
onDateSelected(picker: MatDatepicker<Date>) {
  picker.close();
}

// 保留你已有的清除和设置无限期方法
clearDate(picker: MatDatepicker<Date>) {
  this.selectedDate = null;
  picker.close();
}

setInfinityDate(picker: MatDatepicker<Date>) {
  // 根据需求设置"无限期"对应的日期值，示例用2100年最后一天
  this.selectedDate = new Date(2100, 11, 31);
  picker.close();
}

3. 移除默认确定按钮 #

只要不在mat-datepicker-actions内添加默认的<button mat-button matDatepickerConfirm>确定</button>，默认确定按钮就不会显示，完全符合你的需求。

修改完成后，选中日期时会立刻触发dateChange事件，调用picker.close()关闭面板，同时日期同步到绑定变量，和未添加自定义操作按钮时的默认行为完全一致。

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