el-date-picker可选值范围限制

针对type="daterange"的el-date-picker，对前后选择的日期范围有联动要求，可以这样做：

html

<el-date-picker :picker-options="pickerOptions" @change="dateChange" type="daterange"></el-date-picker>

js

// vue的data部分
// 假设开始时间和结束时间的范围前后不能超过3天
pickerOptions: {
  onPick: obj => {
    this.pickerMinDate = new Date(obj.minDate).getTime();
  },
  disabledDate: time => {
    if (this.pickerMinDate) {
      // 只在选择第一个时间以后才做限制
      const day =  3 * 24 * 3600 * 1000
      const maxTime = this.pickerMinDate + day
      const minTime = this.pickerMinDate - day
      return time.getTime() > maxTime || time.getTime() < minTime;
    } else {
      // 未做选择时不做限制
      return false;
    }
  }
},

// vue的methods部分
// 每次change之后要清空限制，让以后选择都可以从全新的状态开始
dateChange() {
  this.pickerMinDate = null
},

以上为2020年9月14日更新

---

使用Element-UI进行业务开发时可能会遇到选择“开始日期”“结束日期”的需求：

为了保证数据符合真实情景，需要对其做进一步的限制：开始日期不能晚于结束日期、结束日期不能早于开始日期。下图被置灰的日期表示不能选择：

思路

监听开始日期选择器的聚焦事件（@focus），判断结束日期是否已选，是，将开始日期选择器的可选值范围（:picker-options）设成小于等于结束日期，否，不做限制（即可以随意选）；同理，监听结束日期选择器的聚焦事件，判断开始日期是否已选，是，将结束日期选择器的可选值范围设成大于等于开始日期，否，不做限制。

实现方法

html

<!--省略其他属性，只保留:picker-options和@focus-->

<!--开始日期-->
<el-date-picker :picker-options="startPickerOptions" @focus="startDateFocus" />

<!--结束日期-->
<el-date-picker :picker-options="endPickerOptions" @focus="endDateFocus" />

js

data () {
  return {
    startDate: '',
    endDate: '',
    startPickerOptions: {},
    endPickerOptions: {},
  }
},

methods: {
  stringDateToTimestamp(stringDate) {
    return Date.parse(new Date(stringDate));
  },
  startDateFocus() {
    let endDate = this.endDate;
    if (!endDate) return;
    let that = this;
    that.startPickerOptions = {
      disabledDate(time) {
        return time.getTime() >= that.stringDateToTimestamp(endDate) - 1 * 24 * 3600 * 1000;
      },
    };
  },
  endDateFocus() {
    let startDate = this.startDate;
    if (!startDate) return;
    let that = this;
    that.endPickerOptions = {
      disabledDate(time) {
        return time.getTime() <= that.stringDateToTimestamp(startDate);
      },
    };
  },
},