element-ui DatePicker 日期选择器动态添加日期限制范围

使用场景：我们在选择时间时，我们可能会需要限制条件，限制时间的可选范围，因此我们需要动态添加限制范围。

element-ui 中，提供 picker-options 对当前时间日期选择器特有的选项配置。值得注意的是，picker-options 的是一个 object 属性。

picker-options

当前时间日期选择器特有的选项参考下表

object

—

{}

更多细节，请参考案例：element-ui form 日期选择器限制选择范围。

我们在 picker-options 对象属性中， disabledDate 用于设置禁用状态，要求返回 Boolean。

如果我们传入一个日期值来限制当前日期选择器在 picker-options 中 disabledDate 中处理需要禁用的日期，因此我们将 picker-options 放在 computed 里面去处理，代码如下：

computed: {
  pickerOptions () {
    let _this = this
    return {
      disabledDate(time) {
        return time.getTime() < new Date(_this.inquiryEndTime).getTime()
      },
    }
  }
}

在【循环表单】中，每项中的日期选择器的限制范围都是不一样的，那么我们又该如何去添加限制呢？

<el-date-picker
  v-model="scope.row.quoteEndTime"
  type="date"
  size="mini"
  value-format="yyyy-MM-dd"
  :picker-options="pickerOptionsStart(scope.row)"
/>

我们可以在 picker-options 中，将其作为一个方法，且传入限制时间范围的数据，且返回一个对象。注意这个方法需要返回一个对象，因为 picker-options 是一个对象属性。代码如下：

pickerOptionsStart (row = {}) {
  return {
    disabledDate (time) {
      return time.getTime() < new Date().getTime() - 24 * 3600 * 1000 || time.getTime() < new Date(row.inquiryEndTime).getTime()
    }
  }
},

当然除了使用方法来处理，同样我们可以给 computed 传入参数，将返回值改为函数，再进行传值操作，返回将结果返回。参考链接：computed 传入参数。

在选择时间范围时，如何控制选择开始日期后，只能选择开始日期前一周或者后一周的日期，其他日期处于禁止选择状态。

element-ui 提供了一个 onPick 函数，选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效。案例如下：

computed: {
  pickerOptions(){
    let _this = this
    return {
      disabledDate(time) {
        const times =  86400000 * 7//一周的毫秒数
        let curSelectTime = new Date(_this.minDate).getTime()
        let before = curSelectTime - times//前一周毫秒数
        let after = curSelectTime + times//后一周毫秒数
        return time.getTime() > after || time.getTime() < before
      },
      onPick({maxDate, minDate}) {
        if (!maxDate) {
          _this.minDate = minDate
        }
      }
    }
  }
}