Element Plus-开始时间不能晚于结束时间，包含时间的判断

一、先总结整体-两个时间选择器进行联动：

1.封装子组件data_picker.vue

<!-- 开始结束时间分开 -->
<template>
  <div style="display: inline-block;">
    <el-date-picker type="datetime" v-model="data.startTime" placeholder="开始时间" style="width: 200px"
      :disabledDate="disabledDateFn" :disabled-hours="disabledHours" :disabled-minutes="disabledMinutes"
      :disabled-seconds="disabledSeconds" />
    <el-date-picker type="datetime" v-model="data.endTime" placeholder="结束时间" style="width: 200px"
      :disabledDate="disabledDateFn2" :disabled-hours="disabledHours2" :disabled-minutes="disabledMinutes2"
      :disabled-seconds="disabledSeconds2" />
  </div>
</template>
<script>
  import {
    defineComponent,
    ref,
    reactive,
    watch
  } from 'vue'
  export default defineComponent({
    name: "drDatePicker",
    props: {
      startDate: {
        required: true
      },
      endDate: {
        required: true
      }
    },
    setup(props, {
      emit
    }) {
      const data = reactive({
        startTime: props.startDate,
        endTime: props.endDate,
      });
      watch(
        // reactive监视对象的某个属性,该属性多层嵌套,必须开启深度监视
        () => data.startTime,
        (newVal, oldVal) => {
          emit('update:startDate', newVal);
        },
        () => data.endTime,
        (newVal, oldVal) => {
          emit('update:endDate', newVal);
        }
      );
      //开始时间
      const disabledDateFn = (time) => {
        if (data.endTime != undefined) {
          return time.getTime() > data.endTime.getTime()
        }
      };

      const disabledHours = () => {
        let startTimeMs = new Date(data.endTime).setHours(0, 0, 0, 0);
        let endTimeMs = new Date(data.startTime).setHours(0, 0, 0, 0);
        if (startTimeMs === endTimeMs) {
          let a = [];
          for (let i = 0; i < 24; i++) {
            if (data.endTime.getHours() >= i) continue;
            a.push(i);
          }
          return a;
        }
      };
      const disabledMinutes = () => {
        let startTimeMs = new Date(data.endTime).setHours(0, 0, 0, 0);
        let endTimeMs = new Date(data.startTime).setHours(0, 0, 0, 0);
        if (startTimeMs === endTimeMs) {
          let a = [];
          for (let i = 0; i < 60; i++) {
            // 限制之前 < 之后 > ，下面同理
            if (data.endTime.getMinutes() >= i) continue;
            a.push(i);
          }
          return a;
        }
      };
      const disabledSeconds = () => {
        let startTimeMs = new Date(data.endTime).setHours(0, 0, 0, 0);
        let endTimeMs = new Date(data.startTime).setHours(0, 0, 0, 0);
        if (startTimeMs === endTimeMs) {
          let a = [];
          for (let i = 0; i < 60; i++) {
            // 限制之前 < 之后 > ，下面同理
            if (data.endTime.getSeconds() >= i) continue;
            a.push(i);
          }
          return a;
        }
      };
      //结束时间
      const disabledDateFn2 = (time) => {
        if (data.startTime != undefined) {
          return time.getTime() < new Date(data.startTime.getTime() - 24 * 3600 * 1000);
        }
      };

      const disabledHours2 = () => {
        let startTimeMs = new Date(data.endTime).setHours(0, 0, 0, 0);
        let endTimeMs = new Date(data.startTime).setHours(0, 0, 0, 0);
        if (startTimeMs === endTimeMs) {
          let a = [];
          for (let i = 0; i < 24; i++) {
            if (data.startTime.getHours() <= i) continue;
            a.push(i);
          }
          return a;
        }
      };
      const disabledMinutes2 = () => {
        let startTimeMs = new Date(data.endTime).setHours(0, 0, 0, 0);
        let endTimeMs = new Date(data.startTime).setHours(0, 0, 0, 0);
        if (startTimeMs === endTimeMs) {
          let a = [];
          for (let i = 0; i < 60; i++) {
            if (data.startTime.getMinutes() <= i) continue;
            a.push(i);
          }
          return a;
        }
      };
      const disabledSeconds2 = () => {
        let startTimeMs = new Date(data.endTime).setHours(0, 0, 0, 0);
        let endTimeMs = new Date(data.startTime).setHours(0, 0, 0, 0);
        if (startTimeMs === endTimeMs) {
          let a = [];
          for (let i = 0; i < 60; i++) {
            if (data.startTime.getSeconds() <= i) continue;
            a.push(i);
          }
          return a;
        }
      };
      return {
        data,
        disabledDateFn,
        disabledHours,
        disabledMinutes,
        disabledSeconds,
        disabledDateFn2,
        disabledHours2,
        disabledMinutes2,
        disabledSeconds2,
      }
    }
  })
</script>
<style scoped>

</style>

2.父组件引用

 <drDatePicker  v-model:startDate="data.startDate" v-model:endDate="data.endDate" />

默认开始结束时间： 

const data = reactive({
    startDate:new Date(new Date() - 24 * 60 * 60 * 1000 * 1),
    endDate:new Date(),
})

3.具体说明

• element pro没有picker-options
• :disabledDate="disabledDateFn"           对日期
• :disabled-hours="disabledHours"           对时
• :disabled-minutes="disabledMinutes"     对分
• :disabled-seconds="disabledSeconds"   对秒
• 需要考虑开始或结束时间为null的情况
• 注意初始赋值的写法