elementUI+vue3+ts日期选择器(开始时间 大于 结束时间限制)

在Vue 3和Element UI结合的项目中，要实现一个开始时间大于结束时间的限制，可以使用Element UI的<el-date-picker>组件，并结合Vue的响应式数据模型来实现。

以下是一个简单的例子，展示了如何设置这种限制：

<template>
  <el-form>
    <el-form-item label="开始时间">
      <el-date-picker
        v-model="startDate"
        type="date"
        placeholder="选择开始时间"
        :picker-options="startPickerOptions"
      ></el-date-picker>
    </el-form-item>
    <el-form-item label="结束时间">
      <el-date-picker
        v-model="endDate"
        type="date"
        placeholder="选择结束时间"
        :picker-options="endPickerOptions"
      ></el-date-picker>
    </el-form-item>
  </el-form>
</template>
 
<script lang="ts">
import { ref, reactive, defineComponent } from 'vue';
 
export default defineComponent({
  setup() {
    const startDate = ref<Date>();
    const endDate = ref<Date>();
 
    const startPickerOptions = reactive({
      disabledDate: (time: Date) => {
        if (endDate.value) {
          return time.getTime() > endDate.value.getTime();
        }
        return false;
      }
    });
 
    const endPickerOptions = reactive({
      disabledDate: (time: Date) => {
        if (startDate.value) {
          return time.getTime() < startDate.value.getTime() - 1 * 24 * 60 * 60 * 1000; // 减去一天的时间
        }
        return false;
      }
    });
 
    return {
      startDate,
      endDate,
      startPickerOptions,
      endPickerOptions
    };
  }
});
</script>

在这个例子中，我们定义了两个ref来绑定日期选择器的值，并且创建了两个reactive对象startPickerOptions和endPickerOptions来定义开始和结束日期选择器的disabledDate函数。disabledDate函数用来禁用不符合条件的日期，确保结束日期始终大于开始日期。这里减去一天的时间是为了允许选择与开始日期当天同一天作为结束日期。