elementui两个el-date-picker进行互相关联

两个el-date-picker进行互相关联：
要求初始化的时候起始时间和结束时间都应该大于今天的时间，当选择起始时间后结束时间要大于起始时间，当选择结束时间后，起始时间要小于结束时间大于今日时间：
注意：尽量把组件自带的“此刻”通过css样式隐藏掉

示例是vue2中使用的：

// HTML
<template>
 <span class="label-name">封锁起始时间：</span>
<el-date-picker
  v-model="form.startTime"
  placeholder="请选择..."
  size="mini"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss"
  :picker-options="startTimeOptions"
  @change="changeDateTime"
/>
<span class="label-name">封锁结束时间：</span>
<el-date-picker
  v-model="form.endTime"
  placeholder="请选择..."
  size="mini"
  type="datetime"
  value-format="yyyy-MM-dd HH:mm:ss"
  :picker-options="endTimeOptions"
  @change="changeDateTime"
/>
</template>

// script
<script>
data() {
    
    
  return {
    
    
    startTimeOptions: {
    
    
      disabledDate: (time) => {
    
    
        return time.getTime() < Date.now() - 86400000
      }
    },
    endTimeOptions: {
    
    
      disabledDate: (time) => {
    
    
        return time.getTime() < Date.now() - 86400000
      }
    }
  }
},
methods: {
    
    
    changeDateTime() {
    
    
      // 因为startTime和endTime格式为 年-月-日 时:分:秒， 所以这里先把startTime和endTime转换为时间戳再进行比较
      const startTime = new Date(this.form.startTime).getTime()
      const endTime = new Date(this.form.endTime).getTime()
      this.startTimeOptions = {
    
    
        disabledDate: (time) => {
    
    
          if (endTime !== 0) {
    
    
            return time.getTime() > endTime || time.getTime() < Date.now() - 86400000
          } else {
    
    
            return time.getTime() < Date.now() - 86400000
          }
        }
      }
      this.endTimeOptions = {
    
    
        disabledDate: (time) => {
    
    
          if (startTime !== 0) {
    
    
            return time.getTime() < startTime
          } else {
    
    
            return time.getTime() < Date.now() - 86400000
          }
        }
      }
    }
}
</script>

参考链接：https://blog.csdn.net/weixin_29344615/article/details/103465089