element ui 时间控件DateTimePicker动态限制时间范围为一个月

话不多说，直接上图
1.刚打开时

2.选择需要的月份（在点击时已经限制了时间）

3.选定结束时间后（解除了限制）

以上就是实现该功能的思路，下面将会用代码讲解怎么去实现这个小功能。

data(){
  return {
     selectData: '',
     pickerOptions: {
      // 点击时，选择的是开始时间，也就是minDate
      onPick: ({ maxDate, minDate }) => {
         this.selectData = minDate.getTime()
         if (maxDate) {
           // 解除限制
           this.selectData = ''
         }
      },
      disabledDate: (time) => {
          // 是否限制的判断条件
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            // 这里就是限制的关键，大于或者小于本月的日期被禁用
            return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
          } else {
            return false
          }
        }
     }
  }
},
methods:{
  // 检查是否为空
  isNull(value) {
    if (value) {
      return false
    }
    return true
  }
}