DatePicker日期选择框切换月份、年份时添加监听函数

实现方式：通过添加addEventListener('DOMCharacterDataModified',() =>{})监听来实现。

功能需求：切换月份时需要调用接口来获取该月禁用日期。

1.dom节点

 <a-date-picker 
    v-model:value="date"
    @openChange="datePanelChange"
    :disabled-date="disabledDate" 
    format="YYYY-MM-DD" 
    valueFormat="YYYY-MM-DD"/>

2.js部分主要代码

setup(){
  date = ref(null)
  disabledDates = ref([])
  // 禁用时间设置
  function disabledDate(current) {
    return disabledDates.includes(moment(current).format("YYYY-MM-DD"))
  };
  // 日期面板展开/关闭
  function datePanelChange(isShow){
    if(isShow){
      setTimeout(() => {
        const dateDom = document.querySelector('.ant-calendar-ym-select')
        dateDom.addEventListener('DOMCharacterDataModified', () => {
        const year = document.querySelector('.ant-calendar-year-        
          select').innerText.replace('年', '')
        let month = document.querySelector('.ant-calendar-month- 
          select').innerText.replace('月', '')
        month = month < 10 ? '0' + month : month
        const date_after = moment(year + '-' +month).startOf("month").format("YYYY-MM-DD")
        const date_before = moment(year + '-' +month).endOf("month").format("YYYY-MM-DD")
        ajax.getNodate().then(res =>{
          disabledDates = [].concat(res)})
       })
      }, 0)
    }
   }
    return {
      datePanelChange,
      disabledDates,
      disabledDate
      date,
    }
}