DatePicker 实现:日期范围截止时间为23:59:59
文章目录
- 需求描述
- 实现逻辑
需求描述
在使用 Element Plus 的 el-date-picker
组件进行日期范围选择时,如果你希望选择的日期范围截止时间为所选时间的23:59:59,你可以通过设置 type 属性为 daterange
,并结合使用 value-format
属性来控制时间格式。使用 value-format
来格式化绑定值,并在用户选择日期后通过 JavaScript 代码来调整时间。
实现逻辑
- 设置
value-format
:首先,设置value-format
为'yyyy-MM-dd HH:mm:ss'
来确保绑定的值包含时间。 - 监听选择事件:通过监听
change
事件,你可以在用户选择日期后修改时间部分。 - 调整时间:在事件处理函数中,将截止时间的时间设置为23:59:59。
<script lang="ts" setup>
import { ref } from 'vue';
import { dayjs } from 'element-plus';
const value1 = ref([])
const handleDateChange = (dataValue: Date | [Date, Date]) => {
if (dataValue) {
const start = new Date(dataValue[0]);
const end = new Date(dataValue[1]);
start.setHours(0,0,0); // 设置开始时间为当天的00:00:00点
end.setHours(23, 59, 59); // 设置结束时间为当天的23:59:59
value1.value[0] = dayjs(start).format('YYYY-MM-DD HH:mm:ss ');
value1.value[1] = dayjs(end).format('YYYY-MM-DD HH:mm:ss');
}
}
</script>
<template>
<el-date-picker
v-model="value1"
type="daterange"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
@change="handleDateChange"
/>
</template>