关于ant-design-vue:antd-组件-RangePicker-设置modemonth-month-disableDate属性失效

前言：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;
  }
}