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

时间轴组件开发：实现灵活的时间范围选择

news 2025/8/31 5:04:36

前言

前端开发中，时间范围选择是一个非常常见的功能需求，无论是数据统计还是订单筛选，都离不开它。虽然 element 组件库提供的基础日期选择器能够满足大部分常规需求，但当项目出现 「动态时间推移」「时间间隔自定义」 等定制化需求时，原生组件便显得捉襟见肘。本文将实现自定义的时间范围选择组件，不仅支持自定义时间区间的选择，还能根据用户设置的时间间隔，实现向前、向后推移时间范围的交互功能。

一、完整代码

<template><div class="timeline"><div><el-date-picker v-model="dateData" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" :default-time="defaultTime" @change="timeChange"> </el-date-picker></div><div><el-select v-model="interval" placeholder="请选择间隔时间"><el-option v-for="item in optionsInterval" :key="item.value" :label="item.label" :value="item.value"> </el-option></el-select></div><div><el-tooltip class="item" effect="dark" :content="'时间向前' + interval + '小时'" placement="top-start"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="63px" height="40px" class="leftArrow" @click="front"><g transform="matrix(1 0 0 1 -562 -494 )"><path d="M 593 529.4  L 609 514  L 593 498.6  L 593 529.4  Z " fill-rule="nonzero" fill="#70b603" stroke="none" /><path d="M 566 514  L 597 514  " stroke-width="8" stroke="#70b603" fill="none" /></g></svg></el-tooltip><el-tooltip class="item" effect="dark" :content="'时间向后' + interval + '小时'" lacement="top-start"><svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1" width="63px" height="40px" @click="offspring"><g transform="matrix(1 0 0 1 -562 -494 )"><path d="M 593 529.4  L 609 514  L 593 498.6  L 593 529.4  Z " fill-rule="nonzero" fill="#70b603" stroke="none" /><path d="M 566 514  L 597 514  " stroke-width="8" stroke="#70b603" fill="none" /></g></svg></el-tooltip></div></div>
</template><script>
export default {data() {const initialDateData = ["2022-02-01 15:20:30", "2022-02-04 12:30:00"]; // 初始化初始日期范围return {defaultTime: ["00:00:00", "23:59:59"],dateData: [...initialDateData], // 当前日期范围，初始值为初始日期范围的副本initialDateData, // 存储初始日期范围，用于后续比较currentDateData: [...initialDateData], // 当前操作的日期范围，初始值为初始日期范围的副本pickerOptions: {disabledDate: (time) => {const start = new Date(this.initialDateData[0]).getTime();const end = new Date(this.initialDateData[1]).getTime();return time.getTime() < start || time.getTime() > end;},},interval: "1",optionsInterval: [{value: "1",label: "1小时",},{value: "3",label: "3小时",},{value: "5",label: "5小时",},{value: "7",label: "7小时",},],};},methods: {// 日期范围选择变化时的回调函数timeChange(newValue) {// 更新当前操作的日期范围为新选择的日期范围this.currentDateData = newValue;},// 向前操作的方法front() {// 获取当前操作日期范围的结束时间const currentEndTime = new Date(this.currentDateData[1]);// 计算新的结束时间，通过当前结束时间减去所选间隔小时数const newEndTime = new Date(currentEndTime.getTime() - parseInt(this.interval) * 60 * 60 * 1000);// 获取初始日期范围的开始时间const initialStartTime = new Date(this.initialDateData[0]);// 检查新的结束时间是否大于等于初始开始时间if (newEndTime >= initialStartTime) {// 计算新的开始时间，通过新的结束时间减去所选间隔小时数const newStartTime = new Date(newEndTime.getTime() - parseInt(this.interval) * 60 * 60 * 1000);// 更新当前操作的日期范围，确保新的开始时间不小于初始开始时间this.currentDateData = [this.formatDate(newStartTime >= initialStartTime ? newStartTime : initialStartTime), this.formatDate(newEndTime)];// 同步更新显示的日期范围this.dateData = [...this.currentDateData];} else {// 若超出范围，给出警告提示this.$message.warning("向前操作超出了初始时间范围！");}},// 向后操作的方法offspring() {// 获取当前操作日期范围的开始时间const currentStartTime = new Date(this.currentDateData[0]);// 计算新的开始时间，通过当前开始时间加上所选间隔小时数const newStartTime = new Date(currentStartTime.getTime() + parseInt(this.interval) * 60 * 60 * 1000);// 获取初始日期范围的结束时间const initialEndTime = new Date(this.initialDateData[1]);// 检查新的开始时间是否小于等于初始结束时间if (newStartTime <= initialEndTime) {// 计算新的结束时间，通过新的开始时间加上所选间隔小时数const newEndTime = new Date(newStartTime.getTime() + parseInt(this.interval) * 60 * 60 * 1000);// 更新当前操作的日期范围，确保新的结束时间不大于初始结束时间this.currentDateData = [this.formatDate(newStartTime), this.formatDate(newEndTime <= initialEndTime ? newEndTime : initialEndTime)];// 同步更新显示的日期范围this.dateData = [...this.currentDateData];} else {// 若超出范围，给出警告提示this.$message.warning("向后操作超出了初始时间范围！");}},// 日期格式化方法，将 Date 对象转换为指定格式的字符串formatDate(date) {// 获取年份const year = date.getFullYear();// 获取月份、日、小时、分钟、秒并补零const month = String(date.getMonth() + 1).padStart(2, "0");const day = String(date.getDate()).padStart(2, "0");const hours = String(date.getHours()).padStart(2, "0");const minutes = String(date.getMinutes()).padStart(2, "0");const seconds = String(date.getSeconds()).padStart(2, "0");// 返回格式化后的日期字符串return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;},},
};
</script><style scoped>
.timeline {padding: 20px;display: flex;
}
.timeline div {margin-right: 5px;
}
.leftArrow {transform: rotate(180deg);
}
svg {cursor: pointer;
}
</style>

二、实现思路

  • 模板部分 <template>

    包含日期范围选择器，一个间隔时间选择下拉框，两个 el-tooltip 组件，分别包含一个 SVG 图标，用于时间向前和向后操作，分别绑定了 front 和 offspring 方法；

  • 数据部分 data

    变量描述
    defaultTime设置日期选择器的默认时间范围为一天（从 00:00:00 到 23:59:59）
    dateData当前显示的日期范围，初始值为 initialDateData 的副本
    initialDateData存储初始日期范围，用于限制可选日期范围
    currentDateData当前操作的日期范围，初始值为 initialDateData 的副本
    pickerOptions日期选择器的选项，通过 disabledDate 方法限制可选日期范围在 initialDateData 之内
    interval当前选择的间隔时间，默认值为 ‘1’
    optionsInterval间隔时间选择下拉框的选项数组

  • 方法部分 methods

    方法名描述
    timeChange当日期范围选择变化时的回调函数，更新 currentDateData 为新选择的日期范围
    front时间向前操作的方法，计算新的结束时间和开始时间，检查是否在初始时间范围内，更新 currentDateData 和 dateData，若超出范围则给出警告提示
    offspring时间向后操作的方法，计算新的开始时间和结束时间，检查是否在初始时间范围内，更新 currentDateData 和 dateData，若超出范围则给出警告提示
    formatDate日期格式化方法，将 Date 对象转换为指定格式的字符串

  • 样式部分 style

    定义了 .timeline 类的样式，设置宽度、内边距、显示方式和子元素的间距。
    定义了 .leftArrow 类的样式，将 SVG 图标旋转 180 度。
    定义了 svg 元素的样式，设置鼠标指针为指针样式。

通过以上实现思路，就可以满足日期范围选择、间隔时间选择以及时间向前和向后操作的功能，并在操作过程中进行时间范围的限制和提示。

三、实现效果

在这里插入图片描述

相关推荐

⭐ element 日期组件使用技巧：时间范围选择限制
⭐ element日期选择器掌控时间范围，更好地满足你的需求
⭐ element日期组件新玩法：只选小时或小时、分钟，让时间更精准
⭐ 解决element日期组件清空后的报错，让你的页面不再崩溃

http://www.dtcms.com/a/357898.html

相关文章：

  • More Effective C++ 条款17: 考虑使用缓式评估（Consider Using Lazy Evaluation）
  • centos7.9的openssh漏洞修复脚本
  • 软考 系统架构设计师系列知识点之杂项集萃（137）
  • 响应式编程框架Reactor【5】
  • PostgreSQL表空间（Tablespace）作用（管理数据库对象的存储位置）（pg_default、pg_global）
  • STL库——list（类模拟实现）
  • 将LLM模型“钉”在电路板上：用电阻矩阵实现物理推理引擎
  • Nacos-3.0.3 适配PostgreSQL数据库
  • openGauss笔记
  • rabbitMQ延时队列实现，怎么保证消息的幂等
  • HTML 核心元素实战：超链接、iframe 框架与 form 表单全面解析
  • 【WDG协议栈】AUTOSAR架构下WDG模块软硬件功能详解
  • 基于单片机指纹考勤系统/智能考勤
  • ⸢ 叁 ⸥ ⤳ 默认安全：概述与建设思路
  • 【Day 33】Linux-MySQL 备份与恢复详解
  • 从分子工具到技术革新：链霉亲和素 - 生物素系统与 M13 噬菌体展示的交叉应用解析
  • 针对 “TCP 数据传输机制” 的攻击
  • vue2下拉菜单
  • 服务器托管多少钱一年？服务器托管收费标准
  • C++day2作业
  • TuringComplete游戏攻略（2.2存储器）
  • 【C++】类和对象（终章）
  • 数值分析——误差的来源与分类、误差的基本概念（绝对误差、相对误差、有效数字）
  • 世界模型的典型框架与分类
  • react性能优化有哪些
  • 卷积神经网络项目：基于CNN实现心律失常（ECG）的小颗粒度分类系统
  • 拆解《AUTOSAR Adaptive Platform Core》（Core.pdf）—— 汽车电子的 “基础技术说明书”
  • 开发指南136-设置零值不显示
  • Java中使用JSONUtil处理JSON数据：从前端到后端的完美转换
  • docker命令（二）