vue3 + ts + antdesign datePicker日期选择框 openChange属性实时获取面板年月信息 render-extra-footer自定义底部样式 自定义日历单元格内容样式

<a-date-picker
          v-model:value="startDate"
          :render-extra-footer="renderExtraFooter" // 在日期选择框底部渲染一些自定义内容
          @open-change="datePanelChange" 
          @change="changeDate"
        >
          <template #dateRender="{ current }">
            <div class="ant-picker-cell-inner" :style="getCurrentStyle(current)">
              {{ current.date() }}
            </div>
          </template>
        </a-date-picker>

// 实时获取面板年月信息

const datePanelChange = (isShow: boolean) => {
  if (isShow) {
    setTimeout(() => {
      const dateDom = document.querySelector('.ant-picker-header') as HTMLDivElement
      dateDom.addEventListener('DOMCharacterDataModified', () => {
        const year = document.querySelector('.ant-picker-year-btn')?.innerText?.replace('年', '') as string
        let month = document.querySelector('.ant-picker-month-btn')?.innerText?.replace('月', '') as string
        month = +month < 10 ? `0${month}` : month
        console.log('年-月', `${year}-${month}`)
      })
    }, 0)
  }
}

// 自定义底部样式

```javascript
const renderExtraFooter = () => {
  return (
    <div>
      <div class="flex px-20px">
        <div class="w-72px">
          <span class="mr-7px inline-block h-15px w-15px translate-y-2px border border-#126CFD rounded-1 border-solid bg-#fff"></span>
          <span class='text-12px'>今天</span>
        </div>
    </div>
    </div>
  )
}

// 自定义日历单元格内容样式

const getCurrentStyle = (current: Dayjs) => {
  const style: CSSProperties = {}
  style.fontSize = '12px'
  // 法定假日 #FAE2A6
  if (current.date() === 5) {
    style.background = '#FAE2A6'
    style.color = '#fff'
  }
  if (dates.value.includes(current.format('YYYY-MM-DD'))) {
    style.background = '#126cfd'
    style.color = '#fff'
  }
  return style
}