Element日期区间控件 分开选择开始和结束日期的禁用判断

选择一个日期区间，我们肯定会想到elementUI的日期区间控件，但是奈何我们需求就是不想要一下选择一个日期范围，而是分两次选择开始日期和结束日期，这样就需要做禁用判断了，比如你先选择开始日期，那你结束日期肯定要在开始日期之后，或者你先选择了结束日期，那你的开始日期只能选结束日期之前了：
如图：

代码如下：

// An highlighted block
<template>
  <div class="date-wrapper">
    <el-date-picker type="date" placeholder="选择开始日期"  :picker-options="pickerOptions" value-format="yyyy-MM-dd" v-model="form.startTime"></el-date-picker>
    <span style="padding: 0 1px">至</span>
    <el-date-picker type="date" placeholder="选择结束日期" :picker-options="pickerOptions1" value-format="yyyy-MM-dd" v-model="form.endTime" ></el-date-picker>
  </div>
</template>
<script>
  const vm = this
  export default {
    name: "datePicker",
    computed:{
      pickerOptions() {
        const that = this
        return {
          disabledDate(time) {
            if(that.form.endTime && that.form.endTime !== ''){
              return time.getTime() > new Date(that.form.endTime).getTime()
            }
          }
        }
      },
      pickerOptions1() {
        const that = this
        return {
          disabledDate(time) {
            if(that.form.startTime && that.form.startTime !== ''){
              return (time.getTime()+ 3600 * 1000 * 24) < new Date(that.form.startTime).getTime()
            }
          }
        }
      }
    },
    data() {
      return {
        form:{
          startTime: '',
          endTime: '',
        }
      }
    }
  }
</script>
<style lang="scss">
  .date-wrapper{
    display: flex;
    justify-content: flex-start;
    vertical-align: center;
    .el-date-editor{
      width: 102px !important;
      .el-input__inner{
        padding: 0px 0px 0 10px !important;
      }
      .el-input__prefix{
        display: none;
      }
      .el-input__suffix{
        text-align: right;
      }
    }
  }
</style>