vue element时间选择不能超过今天 时间选中长度不能超过7天

news/2025/1/15 14:00:47/

背景:

使用elenmet plus 组件实现时间选择;且日期时间选择不能超过今天;连续选中时间的长度范围不能超过7天

效果展示:

 

 

实现思路:

一、使用element组件自带的属性和方法;

:disabled-date="disabledDate"

@calendar-change="calendarChange"

@blur="handleBlur" 

二、使用js方法判断,通过时间组件选择的时间范围value值是否符合条件。

一、element日期时间组价

布局代码:

//布局代码
<el-date-picker v-model="data.valueTwoTimer" type="datetimerange"value-format="YYYY-MM-DD HH:mm:ss" range-separator="至" start-placeholder="开始时间"end-placeholder="结束时间" :unlink-panels="true" :default-time="data.valueTwoTimer":disabled-date="disabledDate" @calendar-change="calendarChange"     @blur="handleBlur" 
/>

核心属性和方法:

:disabled-date="disabledDate" @calendar-change="calendarChange" @blur="handleBlur" 

//vue3的写法
<script setup>
import { onMounted, reactive } from "vue";
const calendarChange = (dates) => {let hasSelectDate = dates !== null && dates.length > 0;data.minTime = hasSelectDate ? dates[0] : null;
};
const disabledDate = (time) => {const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳const tempTime = Date.now() - timeRange;//是否触发calendarChange() if (data.minTime) {const minTime = new Date(data.minTime).getTime();const maxTime = new Date(data.minTime).getTime() + timeRange * 6;// 最大选择7天时间if (tempTime < maxTime) {return time.getTime() < minTime || time.getTime() > tempTime;}return time.getTime() < minTime || time.getTime() > maxTime;} else {return time.getTime() >= tempTime;//不能超过今天}
};
const handleBlur = () => {data.minTime = null;
};
</script>

二、自定义的js方法判断 

自定义一个判断最大选择7天时间的方法。调取接口时触发此方法、或者时间选择完毕后触发此方法等。

//最大7天
const timeLimite = () => {const minTime = timeToTimestamp(times[0]);const maxTime = timeToTimestamp(times[1]);const isOver7 = maxTime - minTime > timeRange * 7;if (isOver7) {ElMessage({type: "warning",message: `历史记录查询时间不能超过7天`,});return false;}
}
const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
const timeToTimestamp = (time) => {let timestamp = Date.parse(new Date(time).toString());return timestamp;
};

 


http://www.ppmy.cn/news/1526114.html

相关文章

Java设计模式之责任链模式详细讲解和案例示范

在本文中&#xff0c;我们将详细讲解Java设计模式中的责任链模式&#xff0c;探讨其基本概念、使用场景、常见问题和解决方式。同时&#xff0c;我们还会介绍责任链模式与策略模式的区别&#xff0c;并结合电商交易系统的示例进行说明。此外&#xff0c;我们还会探讨责任链模式…

Basler 相机与LabVIEW进行集成

Basler 提供的相机驱动和 SDK (Software Development Kit) 允许用户通过 LabVIEW 对相机进行控制和图像采集。以下是 Basler 相机与 LabVIEW 集成的几种方式&#xff1a; 1. Baslers Pylon SDK Basler 提供的 Pylon SDK 是一套用于控制 Basler 相机的开发工具包&#xff0c;支…

ubuntu 安装 nvidia-docker

安装 nvidia-docker 之前要先安装好显卡驱动和docker&#xff0c;不需要安装CUDA 1、安装docker 先卸载旧版本docker sudo apt-get remove docker docker-engine docker.io containerd runc再进行 sudo apt-get update sudo apt-get install ca-certificates curl gnupg lsb…

ModuleNotFoundError: No module named ‘datasets‘

报错信息&#xff1a; 解决&#xff1a;安装datasets 方法1: pip install datasets 方法2: python3可以使用以下命令&#xff1a; pip3 install datasets

15.7 创建prometheus的statsfulset配置

本节重点介绍 : prometheus statsfulset yaml配置 设置statsfulset副本反亲和性设置pod运行优先级设置volumeClaimTemplates设置配置文件热更新容器 configmap-reload设置prometheus主容器 statsfulset 设置元信息 apiVersion: apps/v1 kind: StatefulSet metadata:name: p…

Rust:Result 和 Error

在 Rust 编程语言中&#xff0c;错误处理是一个核心部分&#xff0c;用于确保程序的健売性和可靠性。Rust 通过 Result 枚举和 Error 特质&#xff08;trait&#xff09;来处理错误。 Result 枚举 Result 是一个泛型枚举&#xff0c;用于表示一个操作可能成功或失败。它有两个…

时序预测|基于小龙虾优化高斯过程GPR数据回归预测Matlab程序COA-GPR 多特征输入单输出 附赠基础GPR

时序预测|基于小龙虾优化高斯过程GPR数据回归预测Matlab程序COA-GPR 多特征输入单输出 附赠基础GPR 文章目录 一、基本原理二、实验结果三、核心代码四、代码获取五、总结 时序预测|基于小龙虾优化高斯过程GPR数据回归预测Matlab程序COA-GPR 多特征输入单输出 附赠基础GPR 一、…

实时(按帧)处理的低通滤波C语言实现

写在前面&#xff1a; 低通滤波采用一般的FIR滤波器&#xff0c;因为本次任务&#xff0c;允许的延迟较多&#xff0c;或者说前面损失的信号可以较多&#xff0c;因此&#xff0c;涉及一个很高阶的FIR滤波器&#xff0c;信号起始段的信号点可以不处理&#xff0c;以及&#xf…