element中datetimerange限制时间的选择范围

<el-date-picker
   v-model="Hour"
   type="datetimerange"
   :picker-options="pickerOptions"
   range-separator="-"
   format="yyyy-MM-dd HH"
   value-format="yyyy-MM-dd HH"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
>
</el-date-picker>
----------------------------------------------------------------
 pickerOptions:{
  //注意,如果使用this,下面的方法要使用箭头函数。
   onPick(time) => {
     // 如果选择了只选择了一个时间
     if (!time.maxDate) {
        let timeRange = 2*24*60*60*1000 // 2天
        this.minTime = time.minDate.getTime() - timeRange // 最小时间--前面两天
        this.maxTime = time.minDate.getTime() + timeRange // 最大时间--后面两天
        // 如果选了两个时间,那就清空本次范围判断数据,以备重选
     } else {
        this.minTime = this.maxTime = null
     }
   },
   disabledDate(time) => {
      // onPick后触发
      // 该方法会轮询当3个月内的每一个日期,返回false表示该日期禁选
      if(this.minTime && this.maxTime){
         return time.getTime() < this.minTime || time.getTime() > this.maxTime
      }
   }
 },

posted @ 2023-04-25 10:19  粥粥。  阅读(1420)  评论(0)    收藏  举报