elementplus 使用日期时间选择器,设置可选范围为前后大于2年且只能选择历史时间不能大于当前时间点

news2025/3/20 11:43:47
  • 需求:时间选择器可选的时间范围进行限制,-2年<a<2年且a<new Date().getTime()
  • 核心:这里需要注意plus版没有picker-options换成disabled-date属性了,使用了visible-change和calendar-change属性
  • 逻辑:另设一个参数记录第一个点击的时间点,根据这个时间点设置时间范围,使用visible-change和calendar-change属性来进行第一个时间点的记录和清空
  • 代码环境:vue3 elementplus ts
  • 效果
    在这里插入图片描述
  • 当前时间为25-2-10,且没有进行第一位的时间选择所以仅大于该日期的不能选择
    在这里插入图片描述
  • 选择了第一位时间24-2-6,所以可选时间范围为 小于该值2年内或者大于该值2年内且小于当前时间25-2-10的值,如下方几张图所示
    在这里插入图片描述
    • 小于22年2月6号的不能选
      在这里插入图片描述
    • 大于26-2-6的且大于25-2-10的不能选(我这个24年选的不太好,应该选22年就能展示了但是不想截图了哈哈,应该能理解我的意思吧)
      在这里插入图片描述
  • 代码
// h5
<el-date-picker
						v-model="rightTime"
						type="datetimerange"
						range-separator="-"
						start-placeholder="开始时间"
						end-placeholder="结束时间"
						:disabled-date="disabledDate"
						format="YYYY-MM-DD HH:mm:ss"
						value-format="YYYY-MM-DD HH:mm:ss"
						@visible-change="onvisibleChange"
						@calendar-change="oncalendarChange"
					/>

// js 
const rightTime = ref([])
const chooseDay= ref(null) // 记录第一个点击的时间点

const onvisibleChange = (val)=>{
	if(val){
		chooseDay.value = null
	}
}
const oncalendarChange = (val)=>{
	const [chooseFirstDate] = val
  	chooseDay.value = new Date(chooseFirstDate)

}


const disabledDate = (time: Date) => { // 返回true就禁用
	const now = new Date(); // 当前时间
	if (!chooseDay.value) { // 选择的第一个日期不存在时的情况
		// return false  // 选择的第一个日期不存在时可任意选择开始日期
		return time.getTime() > now.getTime()  // 不能选择比当前时间点打的时间(只能选择历史时间)
	}else{ // 当点击第一个时间点后,可选时间范围为,大于a时间点2年内的或者小于a时间点2年内的
		const twoYearsAgoMin = new Date(chooseDay.value.getFullYear() - 2, chooseDay.value.getMonth(), chooseDay.value.getDate());
		const twoYearsAgoMax = new Date(chooseDay.value.getFullYear() + 2, chooseDay.value.getMonth(), chooseDay.value.getDate());
		return time.getTime() > now.getTime() || time.getTime() < twoYearsAgoMin || time.getTime() > twoYearsAgoMax 
	}
	
	
	
}


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2296205.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

将 AMD Zynq™ RFSoC 扩展到毫米波领域

目录 将 AMD Zynq™ RFSoC 扩展到毫米波领域Avnet XRF RFSoC 系统级模块适用于 MATLAB 的 Avnet RFSoC Explorer 工具箱5G mmWave PAAM 开发平台突破性的宽带毫米波波束成形特征&#xff1a;OTBF103 Mathworks Simulink 模型优化毫米波应用中的射频信号路径 用于宽带毫米波上/下…

Redis企业开发实战(五)——点评项目之分布式锁Redission与秒杀优化

目录 一、Redisson (一)Redisson基本介绍 (二)Redisson入门 1.引入依赖 2.配置Redisson客户端 3.使用Redission的分布式锁 4.tryLock参数解析 4.1tryLock() 4.2tryLock(long waitTime, TimeUnit unit) 4.3tryLock(long waitTime, long leaseTime, TimeUnit unit) 4…

IDEA安装离线插件(目前提供了MavenHelper安装包)

目录 1、离线安装方式2、Maven Helper 1、离线安装方式 首先访问 IDEA插件网站 下载离线插件安装包&#xff0c;操作如下&#xff1a; 然后打开IDEA的Settings配置&#xff0c;点击Plugins&#xff0c;点击右侧设置按钮&#xff08;齿轮&#xff09;&#xff0c;选择Install P…

LabVIEW 开发航天项目软件

在航天项目软件开发中&#xff0c;LabVIEW 凭借其图形化编程优势被广泛应用。然而&#xff0c;航天项目的高可靠性、高精度及复杂环境适应性要求&#xff0c;使得在使用 LabVIEW 开发时&#xff0c;有诸多关键要点需要特别关注。本文将详细分析在开发航天项目软件时需要重点注意…

互联网大厂中面试的高频计算机网络问题及详解

前言 哈喽各位小伙伴们,本期小梁给大家带来了互联网大厂中计算机网络部分的高频面试题,本文会以通俗易懂的语言以及图解形式描述,希望能给大家的面试带来一点帮助,祝大家offer拿到手软!!! 话不多说,我们立刻进入本期正题! 一、计算机网络基础部分 1 先来说说计算机网…

WPS接入DeepSeek模型

1.wps 下载安装 WPS-支持多人在线协作编辑Word、Excel和PPT文档_WPS官方网站 &#xff08;最好是安装最新的wps&#xff09; 2.offieceAi工具下载安装 软件下载 | OfficeAI助手 下载后安装下载下来的两个工具。安装路径可以自行修改 3.打开WPS,点击文件-》 选项-》信任中心 勾…

自然语言处理NLP_[1]-NLP入门

文章目录 1.自然语言处理入门1. 什么是自然语言处理2.自然语言处理的发展简史3 自然语言处理的应用场景1. **机器翻译**2. **文本分类**3. **情感分析**4. **问答系统**5. **文本生成**6. **信息抽取**7. **语音识别与合成**8. **文本摘要**9. **搜索引擎优化**10. **聊天机器人…

计算机毕业设计Python+Spark知识图谱医生推荐系统 医生门诊预测系统 医生数据分析 医生可视化 医疗数据分析 医生爬虫 大数据毕业设计 机器学习

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…

Selenium常用自动化函数

博主主页: 码农派大星. 数据结构专栏:Java数据结构 数据库专栏:数据库 JavaEE专栏:JavaEE 软件测试专栏:软件测试 关注博主带你了解更多知识 目录 1.元素的定位 1.1 定位步骤 1,要想定位,就先打开开发者工具 2,先点击左上角图标 1.2 cssSelector 1.3 xpath 2.操作测…

【故障排除】ls: command not found 终端命令失效的解决办法

【TroubleShooting】ls: command not found 终端命令失效的解决办法 A Solution to Solve “Command not found” of Terminal on Mac 一直在使用心爱的MacBook Pro的Terminal&#xff0c;并且为她定制了不同的Profile。 这样&#xff0c;看起来她可以在不同季节&#xff0c…

12.翻转、对称二叉树,二叉树的深度

反转二叉树 递归写法 很简单 class Solution { public:TreeNode* invertTree(TreeNode* root) {if(rootnullptr)return root;TreeNode* tmp;tmproot->left;root->leftroot->right;root->righttmp;invertTree(root->left);invertTree(root->right);return …

数字孪生智慧停车管理可视化平台

采用图扑可视化技术搭建智慧停车管理平台&#xff0c;实现了全面的数据整合与实时监控&#xff0c;提升了停车场运营效率和用户体验。通过 HT 可视化界面&#xff0c;管理者能够实时观察和分析停车位使用情况&#xff0c;进行精准调度与优化决策。

win10 llamafactory模型微调相关②

微调 使用微调神器LLaMA-Factory轻松改变大语言模型的自我认知_llamafactory 自我认知-CSDN博客 【大模型微调】使用Llama Factory实现中文llama3微调_哔哩哔哩_bilibili 样本数据集 &#xff08;数据集管理脚本处需更改&#xff0c;见报错解决参考1&#xff09; 自我认知微…

车载测试工具 --- CANoe VH6501 进行Not Acknowledge (NAck) 测试

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…

使用 AlexNet 实现图片分类 | PyTorch 深度学习实战

前一篇文章&#xff0c;CNN 卷积神经网络处理图片任务 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于 强化学习必修课&#xff1a;引领人工智能新时代【梗直哥瞿炜】 使用 AlexNet 实现图片分类…

Linux系统引导与服务管理

目录 一、Linux引导过程 1、引导过程概述 1.1、BIOS开机自检 1.2、MBR读取 1.3、加载引导加载程序&#xff08;GRUB&#xff09; 1.4、内核加载 1.5、初始化进程&#xff08;init&#xff09; 二、服务 2.1、服务类型 2.2、服务管理工具 三、运行级别 四、systemd …

【Hadoop】大数据权限管理工具Ranger2.1.0编译

目录 ​编辑一、下载 ranger源码并编译 二、报错信息 报错1 报错2 报错3 报错4 一、下载 ranger源码并编译 ranger官网 https://ranger.apache.org/download.html 由于Ranger不提供二进制安装包&#xff0c;故需要maven编译。安装其它依赖&#xff1a; yum install gcc …

C++ 使用CURL开源库实现Http/Https的get/post请求进行字串和文件传输

CURL开源库介绍 CURL 是一个功能强大的开源库&#xff0c;用于在各种平台上进行网络数据传输。它支持众多的网络协议&#xff0c;像 HTTP、HTTPS、FTP、SMTP 等&#xff0c;能让开发者方便地在程序里实现与远程服务器的通信。 CURL 可以在 Windows、Linux、macOS 等多种操作系…

探店小程序:解锁商业新生态,定制未来

在数字化浪潮席卷全球的今天&#xff0c;商业的边界正在被重新定义。随着移动互联网技术的飞速发展&#xff0c;探店小程序作为一种新兴的商业模式&#xff0c;正以其独特的优势迅速成为连接商家与消费者的桥梁。我们刚刚为一家客户成功交付了一款集分销、分润、商业模式定制开…

【人工智能】如何在VSCode中使用DeepSeek?

文章目录 前言一、准备工作二、安装DeepSeek插件步骤1、扩展图标搜索DeepSeep2、安装DeepSeek插件3、使用测试DeepSeekBito文心一言 结论 前言 介绍在VSCode中调用DeepSeek插件工具&#xff0c;可以进行对话、编码。 一、准备工作 确保已经安装好了VSCode软件。 二、安装D…