vue3ElementPlus使两个日期联动控制(限制结束时间为开始时间的一个月)
vue3ElementPlus两个日期联动控制(限制结束时间为开始时间的一个月)
- 代码展示
<template>
<div>
<el-date-picker
v-model="startDate"
type="date"
placeholder="选择开始日期"
@change="handleStartChange"
></el-date-picker>
<el-date-picker
v-model="endDate"
type="date"
placeholder="选择结束日期"
:disabled-date="disabledEndDate"
></el-date-picker>
</div>
</template>
<script setup>
import { ref } from 'vue'
const startDate = ref(null)
const endDate = ref(null)
// 限制结束日期为开始日期加一个月
const disabledEndDate = (date) => {
if (startDate.value) {
const maxEndDate = new Date(startDate.value)
maxEndDate.setMonth(maxEndDate.getMonth() + 1)
return date < startDate.value || date > maxEndDate
}
return false // 开始日期未选择时，不限制结束日期
}
// 处理开始日期变化
const handleStartChange = (value) => {
// 更新结束日期，确保在范围内
if (endDate.value && (endDate.value < value || endDate.value > new Date(value).setMonth(new Date(value).getMonth() + 1))) {
endDate.value = null
}
}
</script>
代码说明
- 开始日期选择器: 用户可以任意选择开始日期。
- 结束日期选择器: 使用 disabled-date 属性，确保结束日期只能选择在开始日期之后，并且不超过一个月的限制。
- 日期变化处理: 当开始日期变化时，检查当前结束日期是否在允许的范围内，如果不在则重置结束日期。
额外提示
确保在你的项目中已经安装并引入了 Element Plus 组件库，以使日期选择器正常工作。