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

el-date-picker时间选择器限制时间跨度为3天 - 详解

  1. 设置默认的开始与结束时间
  2. 处理结束时间,限制只查3天内的数据
// 下面代码中只写了关键的代码
<template><el-date-pickerv-model="time"type="datetimerange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"@change="handleTimeChange"></template><script>export default {data() {return {time: [new Date(), new Date()],}},created() {this.setDefaultTime();},methods: {// 设置默认时间范围为当天的开始和结束时间setDefaultTime() {const now = new Date();const startOfDay = new Date(now.getFullYear(),now.getMonth(),now.getDate(),0,0,0);const endOfDay = new Date(now.getFullYear(),now.getMonth(),now.getDate(),23,59,59);this.time = [startOfDay, endOfDay];this.handleTimeChange(); // 触发时间选择器方法},handleTimeChange() {const start = this.time[0];const end = this.time[1];// 限制时间跨度最多三天(开始时间的0点到第四天的0点)const maxEnd = new Date(start.getTime() + 3 * 24 * 60 * 60 * 1000); // 三天后的日期if (end > maxEnd) {this.time[1] = maxEnd; // 限制结束时间,真正的结束时间}// 下面可加查询等其他需要的逻辑代码或方法},}}</script>
http://www.zskr.cn/news/7804.html

相关文章:

  • Android--资料
  • 直播录制神器!一款多平台直播流自动录制客户端!
  • 101.计组--二章
  • 【maven01】依赖管理的工具 - 教程
  • 运动控制教学——5分钟学会机器人运动学! - 实践
  • 深入解析:linux基本知识
  • 鸿蒙应用开发从入门到实战(九):ArkTS渲染控制
  • 一个基于 .NET 开源、简易、轻量级的进销存管理系统
  • MySQL 字符集详解
  • Yapi接口文档本地安装
  • 坚果云 坚果 jianguoyun 怎么收文件?
  • 2025.9.16 测试
  • qt QHPieModelMapper详解 - 实践
  • webRTC golang 构建核心
  • (附源码)基于Java的学生托管系统的设计与实现 - 实践
  • agentgateway 简单试用
  • 深入解析:Go 1.25.1 自定义包调用
  • 国内AI云市场:挤不进前三,生存将成问题!
  • CDN可以使用iTrustSSL通配符证书吗?
  • [ssh]:SecureCRT的配置
  • [LeetCode] 3408. Design Task Manager
  • 从0开始的游戏全栈开发工程师学习记录
  • US$428 XTOOL X-100 PAD Tablet Key Programmer with EEPROM Adapter Support Special Functions
  • 【API接口】最新可用喜马拉雅接口
  • 25/09/18 小结
  • 用FastAPI和Streamlit实现一个ChatBot
  • re分区为y盘,efi分区为z盘
  • 文件结构与数据分析专项-解析
  • 平静
  • Codeforces 2144F Bracket Groups 题解 [ 紫 ] [ AC 自动机 ] [ DP ] [ 构造 ]