antd 日期选择组件如何点击左右箭头切换月份年份时触发事件监听

需求背景

实现微信、QQ查历史聊天记录交互唤起日期选择框查询当月有哪些天有过聊天记录，切换月份年份时触发查询该月哪些天有聊天记录，但是antd与ele两大框架的日期选择组件目前都不支持点击箭头切换月份年份的事件触发。

开发思路

监听以上图片2020年9月日期更改时，触发获取当月有聊天的日期。

MutationObserver

1. MutationObserver接口提供了监视对DOM树所做更改的能力。它被设计为旧的Mutation Events功能的替代品，该功能是DOM3 Events规范的一部分。构造函数 MutationObserver() 创建并返回一个新的 MutationObserver 它会在指定的DOM发生变化时被调用。
2. 在日历面板展示时绑定mutationObserver，设置const config = { subtree: true, characterData: true };可监听当dom内文本修改时触发事件。

代码示例

async handleStartOpenChange(open, item) {
  if (!open) {
    this.observer && this.observer.disconnect()
    this.observer = null
    return
  }
  const { getFieldValue } = this.form;
  const { scene } = item;
  const curPickerDate = getFieldValue(scene);
  let mouth = curPickerDate
    ? moment(curPickerDate).format("YYYY-MM")
    : moment({}).format("YYYY-MM");
  let params = {
    mouth,
  };
  setTimeout(() => {
    const dateDom = document.querySelector(".ant-calendar-ym-select");
    const config = { subtree: true, characterData: true };
    const callback = (mutationsList, observer)=>{
      for(const mutation of mutationsList) {
        if (mutation.type === 'characterData') {
          const yearPanel = document
            .querySelector(".ant-calendar-year-select")
            .innerText.replace("年", "");
          let monthPanel = document
            .querySelector(".ant-calendar-month-select")
            .innerText.replace("月", "");
          monthPanel = monthPanel < 10 ? "0" + monthPanel : monthPanel;
          params.mouth = yearPanel + "-" + monthPanel;
          this.getCalendar(params);
        }
      }
    };
    this.observer = new MutationObserver(callback);
    this.observer.observe(dateDom, config);
  }, 0);
  this.getCalendar(params);
}