element-plus:日期时间选择器根据开始时间设置日期范围

在Element Plus中，可以通过设置<el-date-picker>组件的unlink-panels属性为true来实现基于开始日期设置日期范围的功能。这样，结束日期就会自动限制在开始日期之后。

以下是一个简单的例子，展示了如何使用Element Plus的日期时间选择器组件：

<template>
  <el-date-picker
    v-model="startDate"
    type="date"
    placeholder="选择开始日期"
    :picker-options="pickerOptions"
  ></el-date-picker>
  <el-date-picker
    v-model="endDate"
    type="date"
    placeholder="选择结束日期"
    :picker-options="pickerOptions"
  ></el-date-picker>
</template>
 
<script setup>
import { ref } from 'vue';
import { DatePicker } from 'element-plus';
 
const startDate = ref(null);
const endDate = ref(null);
 
const pickerOptions = {
  disabledDate(time) {
    if (startDate.value) {
      return time.getTime() < startDate.value;
    }
    return false;
  }
};
</script>

在这个例子中，startDate和endDate分别用于绑定开始日期和结束日期的选择器。pickerOptions用于配置结束日期选择器，其disabledDate函数限制了用户只能选择开始日期之后的日期。这样，用户在选择结束日期时就能根据开始日期设置日期范围了。