Vue3 + Element Plus 日期选择器：开始 / 结束时间，结束时间不超过今天

写一个完整可直接复制使用的示例包含开始时间 ≤ 结束时间结束时间最大只能选今天禁用逻辑联动选完开始时间后结束时间不能早于开始时间支持date/daterange两种常用场景完整代码推荐两个独立日期选择器template div classdate-picker-box styledisplay: flex; gap: 20px; margin: 20px; !-- 开始时间 -- el-date-picker v-modelstartDate typedate placeholder选择开始时间 :disabled-datedisabledStartDate value-formatYYYY-MM-DD / !-- 结束时间 -- el-date-picker v-modelendDate typedate placeholder选择结束时间 :disabled-datedisabledEndDate value-formatYYYY-MM-DD / /div /template script setup import { ref } from vue // 时间绑定 const startDate ref() const endDate ref() // 今天的日期用于禁用未来日期 const today new Date() // 【开始时间禁用逻辑】不能选未来日期可选根据需求 const disabledStartDate (time) { // return time.getTime() today.getTime() // 开启则开始时间也不能超过今天 return false // 关闭则开始时间可以选未来日期 } // 【结束时间禁用逻辑】核心 // 1. 不能早于开始时间 // 2. 不能超过今天 const disabledEndDate (time) { const startTime startDate.value ? new Date(startDate.value) : null // 条件1小于开始时间 → 禁用 if (startTime time.getTime() startTime.getTime()) { return true } // 条件2大于今天 → 禁用 return time.getTime() today.getTime() } /script如果你用的是范围选择器daterange更简洁一个控件搞定template el-date-picker v-modeldateRange typedaterange range-separator至 start-placeholder开始时间 end-placeholder结束时间 :disabled-datedisabledDate value-formatYYYY-MM-DD / /template script setup import { ref } from vue const dateRange ref([]) const today new Date() // 范围选择器禁用只能选今天及以前 const disabledDate (time) { return time.getTime() today.getTime() } /script核心说明disabled-dateElement Plus 提供的禁用日期函数返回true则该日期不可选。结束时间限制time.getTime() today.getTime()→ 禁止选择今天以后的日期联动开始时间 → 禁止选择早于开始时间的日期格式value-formatYYYY-MM-DD直接输出字符串格式不用自己处理 Date 对象。总结两个独立选择器结束时间 ≤ 今天且不早于开始时间范围选择器直接限制整个区间不超过今天代码可直接复制到 Vue3 Element Plus 项目中使用