antd-vue 实现自定义日期头部

<template>
 <a-config-provider :locale="zhCN">
                <a-calendar 
                :fullscreen="true"  
                :disabled-date="dateDisabled"
                @panelChange="panelChange">
                <!-- :headerRender="headerRender" -->
                  <div slot="headerRender" slot-scope="{ value, type, onChange, onTypeChange }" class="ant-fullcalendar-date" >
                    <div class="slotHeader" style="padding:15px 15px 40px 15px; textAlign: center; position: relative; ">
                        <div style="position: absolute;left: 15px;top: 20px;">
                        </div>
                        <div style="display: inline-block; textAlign: center;">
                          <Select  style="width:200px" :value="moment(value).year()" @on-change="(year) =>{changeYear(value,year,onChange)}">
                              <Option v-for="item in yearOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                          </Select>
                          <Select style="width:140px" :value="moment(value).month()" @on-change="(month) => {changeMonth(value,month,onChange)}">
                              <Option v-for="item in monthOptions" :value="item.value" :key="item.value">{{ item.label }}</Option>
                          </Select>
                        </div>
                        <div style="position: absolute;right: 15px;top: 20px;">
                          <ButtonGroup>
                            <Button type="primary" @click="() => {prevMonth(value,onChange)}">
                                <Icon type="ios-arrow-back"></Icon>
                            </Button>
                            <Button type="primary" @click="() => {showTotay(value,onChange)}">本月</Button>
                            <Button type="primary" @click="()=> {nextMonth(value,onChange)}">
                                <Icon type="ios-arrow-forward"></Icon>
                            </Button>
                        </ButtonGroup>
                        </div>
                        </div>
                  </div>
                  <ul slot="dateCellRender" slot-scope="value" class="events">
                    <li
                        v-for="(row, index) in getListData(value)"
                        :key="row.formId"
                        class="li-item"
                      >
                      </li>

                  </ul>
                </a-calendar>
              </a-config-provider>
           </template>
<script>
import zhCN from "ant-design-vue/es/locale-provider/zh_CN";
data() {
return {
zhCN,
 yearOptions:[],
         monthOptions:[],
}
},
methods: {
    getMonthOptions() {
      let monthOptions = []
      for (let i = 0; i <= 11; i++) {
        monthOptions.push({
          label: `${i+1}月`,
          value: i,
        })
      }
      this.monthOptions = monthOptions
    },
    getYearOptions() {
      let yearOptions = []
      for (let i = 2020; i <= new Date().getFullYear()+5; i++) {
        yearOptions.push({
          label: `${i}年`,
          value: i,
        })
      }
      this.yearOptions = yearOptions
    },
        changeYear(value,newYear, onChange) {
      const now =  value.clone().year(newYear)
      onChange(now)

    },
    changeMonth(value,selectedMonth, onChange) {
      const newValue = value.clone()
      newValue.month(parseInt(selectedMonth, 10))
      onChange(newValue)
    },
    prevMonth(value, onChange) {
      let newMonth = moment(value).subtract(1, 'months');
      onChange(newMonth);
    },
    nextMonth(value, onChange) {
      let newMonth = moment(value).add(1, 'months');
      onChange(newMonth);
    },
    showTotay(value,onChange) {
      const today = moment(new Date())
      onChange(today)
    },
}
</script>

效果如下

原文地址：https://blog.csdn.net/jo_an_na/article/details/143570429

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！