elementplus 使用日期时间选择器,设置可选范围为前后大于2年且只能选择历史时间不能大于当前时间点
- 需求:时间选择器可选的时间范围进行限制,-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年就能展示了但是不想截图了哈哈,应该能理解我的意思吧)

- 小于22年2月6号的不能选
- 代码
// h5
<el-date-pickerv-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] = valchooseDay.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 }}相关文章:
elementplus 使用日期时间选择器,设置可选范围为前后大于2年且只能选择历史时间不能大于当前时间点
需求:时间选择器可选的时间范围进行限制,-2年<a<2年且a<new Date().getTime()核心:这里需要注意plus版没有picker-options换成disabled-date属性了,使用了visible-change和calendar-change属性逻辑:另设一个参…...
将 AMD Zynq™ RFSoC 扩展到毫米波领域
目录 将 AMD Zynq™ RFSoC 扩展到毫米波领域Avnet XRF RFSoC 系统级模块适用于 MATLAB 的 Avnet RFSoC Explorer 工具箱5G mmWave PAAM 开发平台突破性的宽带毫米波波束成形特征: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插件网站 下载离线插件安装包,操作如下: 然后打开IDEA的Settings配置,点击Plugins,点击右侧设置按钮(齿轮),选择Install P…...
LabVIEW 开发航天项目软件
在航天项目软件开发中,LabVIEW 凭借其图形化编程优势被广泛应用。然而,航天项目的高可靠性、高精度及复杂环境适应性要求,使得在使用 LabVIEW 开发时,有诸多关键要点需要特别关注。本文将详细分析在开发航天项目软件时需要重点注意…...
互联网大厂中面试的高频计算机网络问题及详解
前言 哈喽各位小伙伴们,本期小梁给大家带来了互联网大厂中计算机网络部分的高频面试题,本文会以通俗易懂的语言以及图解形式描述,希望能给大家的面试带来一点帮助,祝大家offer拿到手软!!! 话不多说,我们立刻进入本期正题! 一、计算机网络基础部分 1 先来说说计算机网…...
如何定义“破坏环境”
当我们谈论破坏环境时,通常会从人类活动对自然生态造成负面影响的角度来定义。例如,大规模的森林砍伐、工业污染排放、温室气体增加等,都是典型的破坏环境的行为。我们常常看到这些行为导致了生态系统的破坏、物种灭绝、气候变化等问题&#…...
WPS接入DeepSeek模型
1.wps 下载安装 WPS-支持多人在线协作编辑Word、Excel和PPT文档_WPS官方网站 (最好是安装最新的wps) 2.offieceAi工具下载安装 软件下载 | OfficeAI助手 下载后安装下载下来的两个工具。安装路径可以自行修改 3.打开WPS,点击文件-》 选项-》信任中心 勾…...
自然语言处理NLP_[1]-NLP入门
文章目录 1.自然语言处理入门1. 什么是自然语言处理2.自然语言处理的发展简史3 自然语言处理的应用场景1. **机器翻译**2. **文本分类**3. **情感分析**4. **问答系统**5. **文本生成**6. **信息抽取**7. **语音识别与合成**8. **文本摘要**9. **搜索引擎优化**10. **聊天机器人…...
详解在Pytest中忽略测试目录的三种方法
关注开源优测不迷路 大数据测试过程、策略及挑战 测试框架原理,构建成功的基石 在自动化测试工作之前,你应该知道的10条建议 在自动化测试中,重要的不是工具 你是否曾因无关或过时的代码导致测试失败? 这可能会增加调试和故障排除…...
IDEA中列举的是否是SpringBoot的依赖项的全部?在哪里能查到所有依赖项,如何开发自己的依赖项让别人使用
在 IntelliJ IDEA 中列举的依赖项并不一定是 Spring Boot 项目的全部依赖项。IDEA 通常只显示你在 pom.xml(Maven)或 build.gradle(Gradle)中显式声明的依赖项,而这些依赖项本身可能还会引入其他传递性依赖。 1. 如何…...
ECG分析0210
指标计算方法 1. HR (心率,Heart Rate): 心率是每分钟心跳的次数。它通常通过计算RR间期(即两次R波之间的时间间隔)来获得。 计算方法: 首先,检测到R波的位置(例如通过find_peaks函数检测&a…...
计算机毕业设计Python+Spark知识图谱医生推荐系统 医生门诊预测系统 医生数据分析 医生可视化 医疗数据分析 医生爬虫 大数据毕业设计 机器学习
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
JavaScript:CPU缓存预取以及确定数据下直接更改数组length的好处
CPU缓存预取以及确定数据下直接更改数组length的好处 1. CPU 缓存预取(Cache Preloading):CPU 缓存预取:为什么反向填充栈能利用缓存预取: 2. 为什么可以直接改变数组的 length:数组的动态长度:…...
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,并且为她定制了不同的Profile。 这样,看起来她可以在不同季节,…...
OpenStack-Train版-Allinone自动化部署脚本
一、环境准备 操作系统:CentOS 7 或以上版本 建议配置: CPU:8 核或以上 内存:16 GB 或以上 磁盘:500 GB 或以上 网络配置: 确保虚拟机已配置静态 IP 地址 确保虚拟机可以正常访问外部网络 二、自动…...
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 …...
新电脑配置安装下载
1、谷歌浏览器 地址https://www.google.cn/chrome/ 下载安装即可。 2、nvm下载 下载地址:地址https://nvm.uihtm.com/#google_vignette nvm install 相对应的node版本 // 安装 nvm list 可以查看已下载的node版本 // 查看 nvm use 相对应的node版本号 // 使用 nv…...
数字孪生智慧停车管理可视化平台
采用图扑可视化技术搭建智慧停车管理平台,实现了全面的数据整合与实时监控,提升了停车场运营效率和用户体验。通过 HT 可视化界面,管理者能够实时观察和分析停车位使用情况,进行精准调度与优化决策。...
win10 llamafactory模型微调相关②
微调 使用微调神器LLaMA-Factory轻松改变大语言模型的自我认知_llamafactory 自我认知-CSDN博客 【大模型微调】使用Llama Factory实现中文llama3微调_哔哩哔哩_bilibili 样本数据集 (数据集管理脚本处需更改,见报错解决参考1) 自我认知微…...
车载测试工具 --- CANoe VH6501 进行Not Acknowledge (NAck) 测试
我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 简单,单纯,喜欢独处,独来独往,不易合同频过着接地气的生活,除了生存温饱问题之外,没有什么过多的欲望,表面看起来很高冷,内心热情,如果你身…...
Mysql中存储引擎各种介绍以及应用场景、优缺点
概述 MySQL 提供了多种存储引擎,每种引擎有不同的特点和适用场景。以下是几种常见的 MySQL 存储引擎的详细介绍,包括它们的底层工作原理、优缺点,以及为什么 MySQL 默认选择某种引擎。 1. InnoDB 底层工作原理: 事务支持&#…...
使用 AlexNet 实现图片分类 | PyTorch 深度学习实战
前一篇文章,CNN 卷积神经网络处理图片任务 | PyTorch 深度学习实战 本系列文章 GitHub Repo: https://github.com/hailiang-wang/pytorch-get-started 本篇文章内容来自于 强化学习必修课:引领人工智能新时代【梗直哥瞿炜】 使用 AlexNet 实现图片分类…...
Linux系统引导与服务管理
目录 一、Linux引导过程 1、引导过程概述 1.1、BIOS开机自检 1.2、MBR读取 1.3、加载引导加载程序(GRUB) 1.4、内核加载 1.5、初始化进程(init) 二、服务 2.1、服务类型 2.2、服务管理工具 三、运行级别 四、systemd …...
【Hadoop】大数据权限管理工具Ranger2.1.0编译
目录 编辑一、下载 ranger源码并编译 二、报错信息 报错1 报错2 报错3 报错4 一、下载 ranger源码并编译 ranger官网 https://ranger.apache.org/download.html 由于Ranger不提供二进制安装包,故需要maven编译。安装其它依赖: yum install gcc …...
宝珀(Blancpain):传承近三百年的机械制表传奇(中英双语)
宝珀(Blancpain):传承近三百年的机械制表传奇 在钟表行业中,宝珀(Blancpain) 作为世界上最古老的制表品牌,一直以其卓越的机械工艺、复杂功能腕表和对创新的坚持而闻名。自 1735 年成立以来&am…...
【Linux】Linux命令:crontab
目录 1、作用2、命令使用格式3、常用参数说明4、时程表4.1 格式4.2 常见问题处理 5、示例 1、作用 crontab命令用于对用户的时程表进行查看、删除、修改等操作。 用户的时程表是用于记录着要定期执行的程序。当安装完Linux操作系统启动后, cron服务会定期执行时程表…...
C++ 使用CURL开源库实现Http/Https的get/post请求进行字串和文件传输
CURL开源库介绍 CURL 是一个功能强大的开源库,用于在各种平台上进行网络数据传输。它支持众多的网络协议,像 HTTP、HTTPS、FTP、SMTP 等,能让开发者方便地在程序里实现与远程服务器的通信。 CURL 可以在 Windows、Linux、macOS 等多种操作系…...
浙江大华社招面试
下面是我之前社招面试大华时,面得是嵌入式Linux系统工程师,下面是我初试所被问到的问题分享给大家 毕业之后工作负责过哪些产品,工作负责哪些内容 Camera相关 1、调试sensor是多少像素 2、板子上怎么连接sensor 3、几LINE 4、每个LINE的data rate 是多少 ,单位是什么 5、图…...
