ELEMENT UI time control DATETIMEPICKER dynamically limits the time range to one month

Not much to say, just go to picture
1. When it was just opened

2. Select the desired month (the time has been limited when clicking)

3. After selecting the end time (the restriction is lifted)

The above is the idea of ​​realizing this function, and the following will explain how to realize this small function with code.

<el-date-picker
   v-model="time"
   type="datetimerange"
   @change="datePickerChange"
   :picker-options="pickerOptions"
   range-separator="-"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   align="right"
   style="width:100%;"
   value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
   :default-time="['00:00:00','23:59:59']">
</el-date-picker>

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
  }
}
 
 
 

Copyright statement: This article is an original article by weixin_40998880, following the  CC 4.0 BY-SA  copyright agreement, please attach the original source link and this statement for reprinting.

Link to this article: element ui time control DateTimePicker dynamically limits the time range to one month_Yuwen's Blog-CSDN Blog_datetimepicker limits time