当前位置：首页 > news >正文

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

news 2026/3/26 18:19:53

写一个完整可直接复制使用的示例，包含：

开始时间 ≤ 结束时间
结束时间最大只能选今天
禁用逻辑联动（选完开始时间后，结束时间不能早于开始时间）
支持date/daterange两种常用场景

完整代码（推荐：两个独立日期选择器）

<template> <div class="date-picker-box" style="display: flex; gap: 20px; margin: 20px;"> <!-- 开始时间 --> <el-date-picker v-model="startDate" type="date" placeholder="选择开始时间" :disabled-date="disabledStartDate" value-format="YYYY-MM-DD" /> <!-- 结束时间 --> <el-date-picker v-model="endDate" type="date" placeholder="选择结束时间" :disabled-date="disabledEndDate" value-format="YYYY-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-model="dateRange" type="daterange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :disabled-date="disabledDate" value-format="YYYY-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-date
Element Plus 提供的禁用日期函数，返回true则该日期不可选。
结束时间限制
- time.getTime() > today.getTime()→ 禁止选择今天以后的日期
- 联动开始时间 → 禁止选择早于开始时间的日期
格式
value-format="YYYY-MM-DD"直接输出字符串格式，不用自己处理 Date 对象。