当前位置: 首页 > article >正文

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>

http://www.kler.cn/a/540586.html

相关文章:

  • Qt - 地图相关 —— 2、Qt调用百度在线地图功能示例全集,包含线路规划、地铁线路查询等(附源码)
  • 【开源AI】AI一页一页读PDF
  • JavaScript 中的防抖和节流,它们的区别是什么,以及如何实现?
  • 【Javascript Day12】数组操作方法及String规则和方法
  • 软件模拟I2C案例(寄存器实现)
  • 通讯录管理小程序
  • 《基于Python与DashScope的智能语音合成工具开发》
  • Web3 与区块链:开启透明、安全的网络新时代
  • 计算机毕业设计SpringBoot+LayUI宠物医院管理系统(源码+文档+运行视频+讲解视频)
  • C语言基础10:复杂数据的输入输出
  • Goland 内存逃逸问题
  • 移动(新)魔百盒刷机教程[M301A_YS]
  • 用AI写游戏2——实现老虎机游戏
  • .NET周刊【2月第1期 2025-02-02】
  • DeepSeek 关联 Word 使用教程:解锁办公新效率
  • 不知道MySQL密码怎么办?|不卸载重装的处理办法
  • Unity-Mirror网络框架-从入门到精通之EdgegapLobby示例
  • 用大模型学大模型02-数学基础
  • Spring框架学习大纲
  • R 数组:高效数据处理的基础
  • python+open3d实现彩色点云的无堵塞动态可视化连续播放
  • YOLOv11实战海洋动物图像识别
  • matlab simulink 模拟光伏电池板在不同光照下的输出功率曲线
  • 集群服务 | 云微服务 | 快速入门
  • Pycharm使用Anaconda创建的不同conda环境
  • 03-DevOps-安装并初始化Gitlab