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

news/2025/2/11 9:14:48/
  • 需求:时间选择器可选的时间范围进行限制,-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-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 }}

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

相关文章

保姆级教程Docker部署Zookeeper模式的Kafka镜像

目录 一、安装Docker及可视化工具 二、Docker部署Zookeeper 三、单节点部署 1、创建挂载目录 2、命令运行容器 3、Compose运行容器 4、查看运行状态 5、验证功能 四、部署可视化工具 1、创建挂载目录 2、Compose运行容器 3、查看运行状态 一、安装Docker及可视化工…

相机开启状态下拔出SD卡导致的数据丢失问题及恢复方法

在使用数码相机拍摄照片或视频时&#xff0c;我们偶尔会遇到急需查看已拍摄内容或者管理存储空间的情况。有时&#xff0c;在未关闭相机电源的情况下&#xff0c;用户可能会尝试直接拉出SD卡&#xff0c;这种操作极有可能导致数据丢失甚至损坏SD卡。本文将详细探讨这一现象&…

前端导出pdf,所见即所得

一、推荐方案&#xff1a;html2canvas jsPDF&#xff08;图片式PDF&#xff09; javascript import html2canvas from html2canvas; import jsPDF from jspdf;const exportPDF async (elementId, fileName) > {const element document.getElementById(elementId);// 1.…

DFS+回溯+剪枝(深度优先搜索)——搜索算法

DFS也就是深度优先搜索&#xff0c;比如二叉树的前&#xff0c;中&#xff0c;后序遍历都属于DFS。其本质是递归&#xff0c;要学好DFS首先需要掌握递归。接下来咱们就一起来学习DFS涉及的算法。 一、递归 1.什么是递归&#xff1f; 递归可以这样理解把它拆分出来&#xff0…

springboot接入deepseek深度求索 java

以下是在springboot中接入ai deepseek的过程。官网并没有java的示例。其实java的都可以用。 1. 创建 API key 网址&#xff1a;deepseek API keys 点击创建API key&#xff0c;把创建的key值复制下来&#xff0c;以后就不能再查看了&#xff0c;只能重新创建。 2. 封装询问…

【哇! C++】第一个C++语言程序

目录 ​编辑 第一个C语言程序 一、命名空间 1.1 C为什么会有命名空间 1.2 命名空间域 二、命名空间的使用 2.1 展开命名空间和using声明 2.2 展开命名空间的意义 2.3 命名空间的使用 2.3.1 使用using将命名空间中某个成员引入 2.3.2 命名空间中还可以再继续定义命名…

论文阅读:MGMAE : Motion Guided Masking for Video Masked Autoencoding

MGMAE:Motion Guided Masking for Video Masked Autoencoding Abstract 掩蔽自编码&#xff08;Masked Autoencoding&#xff09;在自监督视频表示学习中展现了出色的表现。时间冗余导致了VideoMAE中高掩蔽比率和定制的掩蔽策略。本文旨在通过引入运动引导掩蔽策略&#xff0…

golang使用sqlite3,开启wal模式,并发读写

因为sqlite是基于文件的&#xff0c;所以默认情况下&#xff0c;sqlite是不支持并发读写的&#xff0c;即写操作会阻塞其他操作&#xff0c;同时sqlite也很容易就产生死锁。 但是作为一个使用广泛的离线数据库&#xff0c;从sqlite3.7.0版本开始&#xff08;SQLite Release 3.…