element-ui 的时间选择器 el-date-picker 实现限制开始时间和结束时间

最终实现效果：

选择了开始时间，再选择结束时间的时候就不能早于开始时间；
选择了结束时间，再选择开始时间的时候就不能晚于结束时间；

1.png

2.png

实现代码:

<template>
   <el-date-picker
          type="date"
          placeholder="选择开始日期"
          v-model="beginTime"
          value-format="yyyy-MM-dd"
          :picker-options="pickerTimeBeg">
   </el-date-picker>
   -
   <el-date-picker
          type="date"
          placeholder="选择结束日期"
          v-model="endTime"
          value-format="yyyy-MM-dd"
          :picker-options="pickerTimeEnd">
  </el-date-picker>
</template>
<script>
export default {
    data() {
        return{
            beginTime:"",
            endTime:"",
            pickerTimeBeg: { //限制开始时间
                disabledDate: (time) => {
                    if (this.endTime != '' && this.endTime) {
                        let timeStr = new Date(this.endTime.replace(/-/g, '/'));
                        return time.getTime() > timeStr;
                    } else {
                        return ''
                    }
                }
            },
            pickerTimeEnd: { //限制结束时间
                disabledDate: (time) => {
                    if (this.beginTime != '' && this.beginTime) {
                        let timeStr = new Date(this.beginTime.replace(/-/g, '/'));
                        return time.getTime() < timeStr;
                    } else {
                        return ''
                    }
                }
            }
        }
    }
}
</script>