关于Element-Ui 时间范围选择器DatePicker禁用范围日期问题

1,095 阅读2分钟

首先说明,本人是个很菜的人。

饿了么组件库的DatePicker 日期范围选择,如何禁用xxx~xxx日期,只提供部分时间段选择呢。

我使用的是这种时间范围选择组件

 <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
      //这边定义下picker-options
      :picker-options="pickerOptions"
  </el-date-picker>

关于禁用两个时间段的问题,官网提供了一个APIPicker Options我们就在Vue的计算方法 computed 里面写,当然了,在data里也可以吗,通过打印disableDate里面的time发现返回的都是一堆的日期,而官方文档说明返回结果为Boolean

//用法    pickerOptions (){
      const _this = this;
      return {
        disabledDate(time) {
            return time.getTime() > Date.now() - 8.64e6;
        }
      }
    }


这样写,就能限制用户只能在有个需求,是禁用指定的开始日期,和指定的结束日期,咋办呢。一开始我是不理解的,毕竟pickerOptions方法只会返回一个布尔值,如何达到禁用两个日期的效果呢。这里还是非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常感谢我的好友 技术部一哥 小文哥为我讲解了一些概念。


picker-options属性是接收一个对象,所以 disabledDate 禁用需要禁用的日期时,只要在disabledDate的参数中将需要禁用的时间return返回,该时间就会被禁用。这个时候,我们把禁用的日期设置为true return出去。就可以啦。

代码:

    pickerOptions (){
      const _this = this;
      return {
        disabledDate(time) {
          const licenseStart = new 
          //_this.ViewMode[2].StartEnableDate 是我的指定日期。
          Date(_this.ViewMode[2].StartEnableDate);
          const licenseEnd = new Date();
          const now = new Date(time);//这个代表今天日期
          // licenseStart.setDate(licenseStart.getDate());
          return ! ( now >= licenseStart && now <= licenseEnd);
          // return time.getTime() < licenseStart.getTime();
        }
      }
    }

这样就大功告成了。