el-date-picker 限制可选的开始时间和结束时间

交互效果

示例代码

• 官方文档：
  

disabledDate返回值为false，证明当前时间可选；反之，当前时间不可选

<template>
  <div>
    <el-date-picker
      :picker-options="pickerOptions"
      v-model="daterange"
      type="daterange"
      format="yyyy-MM-dd"
      value-format="yyyy-MM-dd"
      range-separator="~"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>
  </div>
</template>

<script>

export default {
  data() {
    return {
      daterange: '',
      pickerMinDate: '', // 第一次选中的时间
      pickerOptions: {
        onPick: obj => {
          console.log('obj', obj) // {maxDate: xxx, minDate: xxx(中国标准时间)}
          this.pickerMinDate = new Date(obj.minDate).getTime()
        },
        disabledDate: time => {
          if(this.pickerMinDate) {
            const day1 = 7 * 24 * 3600 * 1000 // 可选的时间范围不超过7天
            let maxTime = this.pickerMinDate + day1
            let minTime = this.pickerMinDate - day1
            console.log('return', time.getTime() > maxTime || time.getTime() < minTime) // 输出查看布尔值
            return time.getTime() > maxTime || time.getTime() < minTime
          }
        }
      }
    };
  },
  }
};
</script>