基于Vue3 + Element Plus实现的日期选择器
作者：还是大剑师兰特
本文介绍了使用Vue3和ElementPlus实现日期选择器的方法,包括禁用逻辑联动、设定结束时间不能选今天、时间格式化等功能,通过示例代码展示了两种常用场景的实现方式,适用于直接复制使用,需要的朋友可以参考下
实现效果
写一个完整可直接复制使用的示例，包含：
- 开始时间 ≤ 结束时间
- 结束时间 最大只能选今天
- 禁用逻辑联动（选完开始时间后，结束时间不能早于开始时间）
- 支持
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 对象。
总结
- 两个独立选择器：结束时间 ≤ 今天，且不早于开始时间
- 范围选择器：直接限制整个区间不超过今天
- 代码可直接复制到 Vue3 + Element Plus 项目中使用
以上就是基于Vue3 + Element Plus实现的日期选择器的详细内容，更多关于Vue3 Element Plus日期选择器的资料请关注脚本之家其它相关文章！