DatePicker 实现:日期范围截止时间为23:59:59

image

需求描述

  在使用 Element Plus 的 el-date-picker 组件进行日期范围选择时,如果你希望选择的日期范围截止时间为所选时间的23:59:59,你可以通过设置 type 属性为 daterange,并结合使用 value-format 属性来控制时间格式。使用 value-format 来格式化绑定值,并在用户选择日期后通过 JavaScript 代码来调整时间。
image

实现逻辑

  1. 设置 value-format:首先,设置 value-format'yyyy-MM-dd HH:mm:ss' 来确保绑定的值包含时间。
  2. 监听选择事件:通过监听 change 事件,你可以在用户选择日期后修改时间部分。
  3. 调整时间:在事件处理函数中,将截止时间的时间设置为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>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

独泪了无痕

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值