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

news/2024/9/18 15:00:38/ 标签: vue.js, elementui

背景:

使用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…

Spring boot中常用注解解释

Data 是Lombok提供的注解&#xff0c;结合了以下几个常用注解的功能&#xff1a; Getter: 自动为所有字段生成getter方法。 Setter: 自动为所有字段生成setter方法。 ToString: 自动生成toString()方法。 EqualsAndHashCode: 自动生成equals()和hashCode()方法。 RequiredArgs…

HTML5中`<span>`标签深入解析

引言 在HTML5中&#xff0c;<span>标签是一个行内元素&#xff0c;用于对文档中的一小部分文本或内容进行分组&#xff0c;以便于应用CSS样式或JavaScript脚本。与块级元素&#xff08;如<div>&#xff09;不同&#xff0c;<span>不会打断文本的流动&#x…

设计模式之单例模式(通俗易懂--代码辅助理解【Java版】)

文章目录 设计模式概述1、单例模式概述2、懒汉式&#xff1a;3、饿汉式4、懒汉式&#xff1a;解决反射、序列化反序列化问题5、懒汉式DCL&#xff08;推荐&#xff09;6、应用场景7、单例线程池实现8、总结 设计模式概述 创建型模式&#xff1a;工厂方法、抽象方法、建造者、原…

conda、anaconda、pip、torch、pytorch、tensorflow到底是什么东西?(转载自本人的知乎回答)

转载自本人的知乎回答&#xff08;截止2024年9月&#xff0c;1700赞同&#xff0c;2400收藏&#xff09; https://www.zhihu.com/question/566592612/answer/3063465880 如果你是一个大四的CS准研究生回去补基础课&#xff0c;假如是科班CS甚至科班EE的话那你基础也太差了。你…

相亲交友程序系统开发产品分析

相亲交友系统是一种专门为单身人士设计的社交平台&#xff0c;旨在帮助他们找到合适的伴侣。这类系统通常包括了线上和线下的多种互动方式&#xff0c;能够让参与者在舒适的环境中相识、相知。编辑&#xff1a;qawsed2466。以下是相亲交友系统的一些关键特点和优势&#xff1a;…

AI算法部署方式对比分析:哪种方案性价比最高?

随着人工智能技术的飞速发展&#xff0c;AI算法在各个领域的应用日益广泛。AI算法的部署方式直接关系到系统的性能、实时性、成本及安全性等多个方面。本文将探讨AI算法分析的三种主要部署方式&#xff1a;本地计算、边缘计算和云计算&#xff0c;并详细分析它们的优劣性。 一、…

计算机毕业设计选题推荐-推拿知识互动平台-Java/Python项目实战

✨作者主页&#xff1a;IT毕设梦工厂✨ 个人简介&#xff1a;曾从事计算机专业培训教学&#xff0c;擅长Java、Python、微信小程序、Golang、安卓Android等项目实战。接项目定制开发、代码讲解、答辩教学、文档编写、降重等。 ☑文末获取源码☑ 精彩专栏推荐⬇⬇⬇ Java项目 Py…

基于微信小程序的宠物之家的设计与实现

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于微信小程序JavaSpringBootVueMySQL的宠物之家/宠物综合…

feign client发送Post请求,发送对象参数,服务端接收不到正确参数报错排查

记一次feignclient发送请求服务端接收不到正确参数排查 服务端代码&#xff1a; Operation(summary "Create team")PostMapping("post")RequiresPermissions("team:add")public RestResponse addTeam(Valid Team team) {this.teamService.crea…

『功能项目』切换职业技能面板【49】

我们打开上一篇48切换职业面板的项目&#xff0c; 本章要做的事情是制作第二职业法师技能面板、第三职业面板并且完成切换 双击打开Canvas进入预制体空间 复制三个技能栏面板 重命名 设置第一技能栏 设置第二职业技能栏 设置第三职业技能栏 修改脚本&#xff1a;ChangeProfess…

经纬恒润高压电池管理系统,助力新能源汽车飞速发展

随着新能源汽车行业的快速发展&#xff0c;电池管理系统作为关键技术之一&#xff0c;其重要性日益凸显。经纬恒润自主研发的高压电池管理系统&#xff08;Battery Management System&#xff0c;BMS&#xff09;&#xff0c;凭借卓越的性能与先进的技术&#xff0c;在新能源汽…

Mac清理其他文件:释放存储空间的高效指南

每个Mac用户都可能遇到存储空间不足的问题&#xff0c;尤其是当“其他”文件积累到一定体积时。在Mac上&#xff0c;“其他”文件通常包括各种系统文件、缓存、文档以及不被归类为应用程序、照片、电影或音乐的其他类型的文件。这些文件往往不易被注意&#xff0c;但逐渐占用了…