vue3中设置结束日期不能小于开始日期

下面使用的是 组合式 API。

<template>
  <div>
    <!-- 第一个日期选择框 -->
    <el-date-picker
      v-model="startDate"
      type="date"
      placeholder="选择日期"
      @change="handleStartDateChange"
    ></el-date-picker>

    <!-- 第二个日期选择框 -->
    <el-date-picker
      v-model="endDate"
      type="date"
      placeholder="选择日期"
      :disabled-date="disabledEndDate"
    ></el-date-picker>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 使用 ref 创建响应式日期对象
    const startDate = ref(new Date()); // 默认值为当前日期
    const endDate = ref(new Date());

    // 处理开始日期变化的事件
    const handleStartDateChange = (value) => {
      if (value) {
        // 当用户选择新的开始日期时，更新结束日期为同一日期
        endDate.value = new Date(value);
      }
    };

    // 禁用早于开始日期的日期
    const disabledEndDate = (date) => {
      // 确保 date 是有效的，并且早于开始日期
      return date && date < startDate.value;
    };

    // 将响应式数据和函数返回，以便在模板中使用
    return {
      startDate,
      endDate,
      handleStartDateChange,
      disabledEndDate
    };
  }
};
</script>