Element-UI 两个 日期选择器 联动选择日期

Element-UI 两个 日期选择器 联动选择日期

<template>
  <div>
    <div class="timesel">
      <span>开始时间：</span>
      <el-date-picker
        v-model="formL.startTime"
        type="date"
        placeholder="选择日期"
        :pickerOptions="startPickerOptions"
        class="choiceTime"
        size="small"
      >
      </el-date-picker>
    </div>
    <div class="timesel">
      <span>结束时间：</span>
      <el-date-picker
        v-model="formL.endTime"
        type="date"
        placeholder="选择日期"
        :pickerOptions="endPickerOptions"
        class="choiceTime"
        size="small"
      >
      </el-date-picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formL: {
        startTime: "",
        endTime: "",
      },
    };
  },
  computed: {
    startPickerOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.formL.endTime) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() > new Date(that.formL.endTime).getTime()
            );
          }
          return time.getTime() > Date.now(); //实现1效果
        },
      };
    },
    endPickerOptions() {
      const that = this;
      return {
        disabledDate(time) {
          if (that.formL.startTime) {
            return (
              time.getTime() > Date.now() ||
              time.getTime() < new Date(that.formL.startTime).getTime() - 8.64e7
            );
          }
          return time.getTime() > Date.now(); //实现1效果
        },
      };
    },
  },
};
</script>

<style lang="scss" scoped>
.timesel {
  white-space: nowrap;
  display: inline-block;

  .el-input {
    width: 160px;
  }
}
.choiceTime {
  display: inline-block;
}
</style>