ele时间选择器多范围限制

相信大家在开发中也会遇到这种需求吧

 在指定范围内限制时间

而我当前的需求是:

1.所选日期不能大于当前日期

2.第二个框选择的时间必须大于第一个框

我知道ele里面有提供这个选择,但是情况特殊,无法使用ele提供的

 

 那么接下来就是重点了

两个问题:

1.如何限制选择时间

2.如何让两个框互相关联

第一个问题:

ele提供了一个方法disabledDate,我就直接贴代码了相信大家都能看懂

<el-date-picker
    v-model="time1"
    type="date"
    value-format="yyyy-MM-dd"
    placeholder="选择日期"
    :picker-options="pickerOptions"
   >
</el-date-picker>

// 注意:pickerOptions要写在data里面
pickerOptions: {
   disabledDate (time) {
      return time.getTime() > new Date()
   }
},

此时就已经达到了这个效果(只能选择今天之前的)

 第二个问题:

我在这里也是卡了很久哈,因为你第二个框的时间限制取决于第一个框选的数据,但是这个方法又是在data里面去定义的,所以取值就成了问题

// 在第一个框内添加一个change事件
@change="restrictTime2"

// 将第一个框的值挂到window上面去
restrictTime () {
   window.time1 = this.time1
},

提示: 这里有一个小坑哈,按照逻辑,我们需要同时满足多个条件应该使用&&,但是这里需要使用||

pickerOptions2: {
   disabledDate (time) {
      return (
        // 写法1 (不支持)
        // time.getTime() < new Date(window.time1) &&
        // time.getTime() > new Date()
        // 写法2 (支持)
        time.getTime() < new Date(window.time1) ||
        time.getTime() > new Date()
      )
   }
}

最后代码附上

<el-date-picker
     v-model="time1"
     type="date"
     value-format="yyyy-MM-dd"
     placeholder="选择日期"
     :picker-options="pickerOptions"
     @change="restrictTime"
>
</el-date-picker>

<el-date-picker
     v-model="time2"
     type="date"
     value-format="yyyy-MM-dd"
     placeholder="选择日期"
     :picker-options="pickerOptions2"
>
</el-date-picker>

// data里面写的
      pickerOptions: {
        disabledDate (time) {
          return time.getTime() > new Date()
        }
      },
      pickerOptions2: {
        disabledDate (time) {
          return (
            time.getTime() < new Date(window.time1) ||
            time.getTime() > new Date()
          )
        }
      }

// methods里面写的
    restrictTime () {
      window.time1 = this.time1
    },