ant-design 中年份选择器 a-date-picker设置部分年份置灰不可选择

标题需求：年份选择器，当前年之后的数据置灰不可选择

思路：通过操作dom获取每一个年份数据，和当前年数据对比，不符合要求的给其加上样式datepicker-year-disabled
实现效果：在这里插入代码片

在template中

<a-date-picker
     v-model="queryParam.yearValue"
     mode="year"
     format="YYYY"
     :open="yearShow"
     @openChange="openChange"
     @panelChange="panelChange"
     placeholder="请选择"
     @pressEnter="handleSaveOk()"
     allow-clear />
1
2
3
4
5
6
7
8
9
10

在data中

queryParam: { yearValue:''},
yearShow: false, //选择年度是否显示选择面板
1
2

在methods中

//选择年度-弹出日历回调
    openChange(status) {
      this.yearShow = status
      //日期禁用规则
      this.timer = setTimeout(()=>{
          this.dateYearDisabledRule()
      },0)
    },
    //选择年度-面板关闭回调
    panelChange(value) {
      this.yearShow = false
      this.queryParam.yearValue = value
      //清除定时器
      clearTimeout(this.timer)
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

/**
         * 日期禁用规则
         * type{String} 规则类型  lteNow(默认)   rangeNowStart  rangeNowEnd
         * value{String} 需要对比值
         * */
        dateYearDisabledRule(type, value) {
            const typeR = type ? type : 'lteNow'
            const valueR = value ? moment(value).format('YYYY') : ''
            //获取dom元素
            const tableDom = document.querySelectorAll('.ant-calendar-year-panel-body')
            const prevBtn = document.querySelector('.ant-calendar-year-panel-prev-decade-btn')
            const nextBtn = document.querySelector('.ant-calendar-year-panel-next-decade-btn')
            const tdDom = tableDom[0].querySelectorAll('td')
            // 当前面板的第一个和最后一个年份类似年份翻页按钮因此和年份翻页按钮做相同处理，否则会有错误
            const prevBtnTd = tdDom[0]
            const nextBtnTd = tdDom[tdDom.length - 1]
            //定义所需对比值
            const nowDate = moment().format('YYYY')
            if (tableDom.length > 0) {
                switch (typeR) {
                    //<=当前年
                    case 'lteNow': (() => {
                        tdDom.forEach(item => {
                            if (item.innerText > nowDate) {
                                item.setAttribute('class', 'datepicker-year-disabled')
                            } else {
                                item.classList.remove('datepicker-year-disabled')
                            }
                        })
                        // 年份翻页按钮
                        const ev = this.dateYearDisabledRule.bind(this, 'lteNow')
                        prevBtn.removeEventListener('click', ev)
                        nextBtn.removeEventListener('click', ev)
                        prevBtn.addEventListener('click', ev)
                        nextBtn.addEventListener('click', ev)

                        prevBtnTd.removeEventListener('click', ev)
                        nextBtnTd.removeEventListener('click', ev)
                        prevBtnTd.addEventListener('click', ev)
                        nextBtnTd.addEventListener('click', ev)
                    })()
                        break

                    //<=当前年、<=结束日期
                    case 'rangeNowStart': (() => {
                        tdDom.forEach(item => {
                            if (item.innerText > nowDate || (valueR && item.innerText > valueR)) {
                                item.setAttribute('class', 'datepicker-year-disabled')
                            } else {
                                item.classList.remove('datepicker-year-disabled')
                            }
                        })

                        // 年份翻页按钮
                        const ev = this.dateYearDisabledRule.bind(this, 'rangeNowStart', value)
                        prevBtn.removeEventListener('click', ev)
                        nextBtn.removeEventListener('click', ev)
                        prevBtn.addEventListener('click', ev)
                        nextBtn.addEventListener('click', ev)

                        prevBtnTd.removeEventListener('click', ev)
                        nextBtnTd.removeEventListener('click', ev)
                        prevBtnTd.addEventListener('click', ev)
                        nextBtnTd.addEventListener('click', ev)
                    })()
                        break


                    //<=当前年、>=开始日期
                    case 'rangeNowEnd': (() => {
                        tdDom.forEach(item => {
                            if (item.innerText > nowDate || (valueR && item.innerText < valueR)) {
                                item.setAttribute('class', 'datepicker-year-disabled')
                            } else {
                                item.classList.remove('datepicker-year-disabled')
                            }
                        })
                        // 年份翻页按钮
                        const ev = this.dateYearDisabledRule.bind(this, 'rangeNowEnd', value)
                        prevBtn.removeEventListener('click', ev)
                        nextBtn.removeEventListener('click', ev)
                        prevBtn.addEventListener('click', ev)
                        nextBtn.addEventListener('click', ev)

                        prevBtnTd.removeEventListener('click', ev)
                        nextBtnTd.removeEventListener('click', ev)
                        prevBtnTd.addEventListener('click', ev)
                        nextBtnTd.addEventListener('click', ev)
                    })()
                        break

                }



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95

css样式

// a-date-picker year禁止选择年
.datepicker-year-disabled {
	pointer-events: none;
	cursor: not-allowed;
	a {
		color: rgba(0, 0, 0, 0.25);
		background: #f5f5f5;
	}
}
1
2
3
4
5
6
7
8
9