Angular 9中除dateChange外，点击mat-datepicker日期（含已选）触发函数的方法

方法1：监听日期面板单元格的点击事件 #

通过ViewChild获取日期选择器实例，在面板打开后给所有日期单元格绑定点击事件，不管点击的是已选中还是未选中的日期，都会触发目标函数。

import { Component, ViewChild, Renderer2 } from '@angular/core';
import { MatDatepicker } from '@angular/material/datepicker';

@Component({
  selector: 'app-date-picker-demo',
  template: `
    <mat-form-field>
      <input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
      <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
      <mat-datepicker #picker></mat-datepicker>
    </mat-form-field>
  `
})
export class DatePickerDemoComponent {
  selectedDate: Date;
  @ViewChild('picker') picker: MatDatepicker<Date>;

  constructor(private renderer: Renderer2) {
    this.picker.openedStream.subscribe(() => {
      // 等待面板DOM渲染完成
      setTimeout(() => {
        const dateCells = document.querySelectorAll('.mat-calendar-body-cell');
        dateCells.forEach(cell => {
          this.renderer.listen(cell, 'click', () => {
            this.handleDateAction();
          });
        });
      }, 100);
    });
  }

  handleDateAction() {
    console.log('日期被点击，执行业务逻辑');
    // 这里写入你的自定义函数逻辑
  }
}

注：使用setTimeout是为了等待面板完全渲染，也可以用MutationObserver来监听面板元素的DOM变化，实现更精准的事件绑定。

方法2：重写MatDatepicker的选择方法 #

如果需要全局生效，可以继承MatDatepicker组件，重写日期选择的核心方法，让每次点击日期都触发自定义回调。

1. 创建自定义日期选择器组件 #

import { MatDatepicker } from '@angular/material/datepicker';
import { Output, EventEmitter } from '@angular/core';

export class CustomMatDatepicker<D> extends MatDatepicker<D> {
  @Output() dateClicked = new EventEmitter<D>();

  select(date: D): void {
    // 保留原有的选中逻辑
    super.select(date);
    // 触发自定义点击事件
    this.dateClicked.emit(date);
  }
}

2. 在模块中替换原组件 #

import { NgModule } from '@angular/core';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { CustomMatDatepicker } from './custom-datepicker';

@NgModule({
  imports: [MatDatepickerModule],
  declarations: [CustomMatDatepicker],
  providers: [
    { provide: MatDatepicker, useClass: CustomMatDatepicker }
  ]
})
export class CustomDatepickerModule {}

之后在模板中就可以直接使用dateClicked事件：

<mat-datepicker #picker (dateClicked)="handleDateAction($event)"></mat-datepicker>

内容的提问来源于stack exchange，提问作者Vishnu .T.D