element DatePicker 日期选择器 时间范围控制

element DatePicker 日期选择器 时间范围控制

实现功能

1、选择了开始时间，结束时间不能小于开始时间
2、选择了结束时间，开始时间不能大于结束时间

代码实现

<template>
<div>
<el-date-picker
          v-model="startTime"
          type="date"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptionsStart"
          placeholder="选择开始日期"
        >
        </el-date-picker>
        <el-date-picker
        :picker-options="pickerOptionsEnd"
          v-model="endTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择结束日期"
        >
        </el-date-picker>
        </div>
        </template>

export default{
data(){
 return{
 pickerOptionsStart: {
           disabledDate: time => {
             let endDateVal = this.endTime;
             if (endDateVal) {
                return time.getTime() > new Date(endDateVal).getTime();
             }
           }
        },
        pickerOptionsEnd: {
           disabledDate: time => {
             let beginDateVal = this.startTime;
             if (beginDateVal) {
               return (time.getTime()<new Date(beginDateVal).getTime()-1*24*60*60*1000
             );
           }
        }
    }
}
}