前言：vue中应用ant-design-vue的rangPicker组件时，mode设置为date时，disabledDate属性失常，可通过返回true或者false设置以后工夫是否禁止点击。当mode设置为month或者year时，disableDate属性生效，为实现大于以后日期的月不能点击，或者小于起始日期的月不能点击可通过获取以后dom的内容，进行判断设置month-disabled类名进而实现mode为非date时的禁用成果。具体代码如下：
1、template
<a-range-picker :disabled-date="disabledDate" :value="month" style="width:240px" :mode="rangeType === 'month' ? ['month', 'month'] : ['date', 'date']" :format="(current === 1 || current === 2) && rangeType === 'month' ? 'YYYYMM' : 'YYYY-MM-DD'" @panelChange="handlePanelChangeMonth" @openChange="openChange" @change="calendarChange" :placeholder="['开始日期', '完结日期']" />2、data设置
data(){ return { rangeType:'month', month: [], }}3、methods中
disabledDate(current) { // Can not select days before today and today let flag = current && current > moment().endOf('day') ? true : false // console.log(444, current, flag) return flag }, //月份批改 handlePanelChangeMonth(value) { let currentDate = value.concat([]) // console.log('handlePanelChangeMonth=', value) // 以后抉择第一个日期小于上次抉择的第一个日期 let rangeType = this.rangeType let rangeValue = [] let isBeforeOne = moment(value[0]).isBefore(this.month[0]) let diff = moment(value[0]).diff(this.month[0], rangeType) // console.log(isBeforeOne, diff) if (isBeforeOne) { // rangeValue第一个值 = 原值-差值 rangeValue[0] = this.sliderValue[0] - diff } else { rangeValue[0] = this.sliderValue[0] + diff } let isBeforeTwo = moment(value[1]).isBefore(this.month[1]) let diff2 = moment(value[1]).diff(this.month[1], rangeType) if (isBeforeTwo) { // rangeValue第一个值 = 原值-差值 rangeValue[1] = this.sliderValue[0] - diff2 } else { rangeValue[1] = this.sliderValue[0] + diff2 } // console.log('diff==', diff, diff2, rangeValue) this.afterChange = false this.month = [currentDate[0], currentDate[1]] this.sliderValue = rangeValue if (this.current === 2) { this.getCwList() } }, openChange() { setTimeout(() => { if (this.rangeType === 'month') { this.endDisabled() this.startDisabled() this.calendarChange() } }) /* 新增-- 解决面板翻页禁用生效问题 */ // 关上日期面板增加翻页事件 // this.yearPanelPageChange() }, // 年份禁用完结工夫 endDisabled() { this.$nextTick(() => { const year = document.getElementsByClassName('ant-calendar-month-panel-year-select-content')[1].innerText let currentYear = moment(new Date()).year() //当 const table = document.getElementsByClassName('ant-calendar-month-panel-tbody') // 所有完结年份 const endList = table[1].querySelectorAll('td') endList.forEach((item, ind) => { if (year < currentYear) { item.classList.remove('month-disabled') return } let currentMonth = moment(new Date()).month() //以后月-1 // console.log('item.innerText==', item, item.innerText) // console.log(ind, currentMonth, ind - currentMonth > 0) if (item.innerText < this.month[0] || ind - currentMonth > 0) { item.setAttribute('class', 'month-disabled') } else { item.classList.remove('month-disabled') } }) }) }, // 年份开始日期禁用 startDisabled() { this.$nextTick(() => { const table = document.getElementsByClassName('ant-calendar-month-panel-tbody') // 所有开始年份 const startList = table[0].querySelectorAll('td') startList.forEach(item => { if (item.innerText > this.month[1]) { item.setAttribute('class', 'month-disabled') } else { item.classList.remove('month-disabled') } }) }) }, // 待选日期发生变化的回调 calendarChange() { if (this.rangeType === 'month') { const yearDom = document.getElementsByClassName('ant-calendar-month-panel-year-select-content')[1] // console.log('change', yearDom) // DOMCharacterDataModified： 监听dom内容变动 yearDom.addEventListener('DOMCharacterDataModified', () => { // console.log('year change') this.endDisabled() }) } },4、style设置
// 禁止点击以后月.month-disabled { pointer-events: none; cursor: not-allowed; a { color: rgba(0, 0, 0, 0.25); background: #f5f5f5; }}