element plus 限制时间范围选择器,开始日期和结束日期不能超过一年

1.限制开始日期和结束日期不能超过一年

<el-date-pickerclass="date-time=select"v-model="timeValue"type="daterange"value-format="YYYY-MM-DD"format="YYYY-MM-DD"range-separator="至"start-placeholder="开始时间"end-placeholder="结束时间"@change="timeChange":disabled-date="disabledDate"@calendar-change="calendarChange"
/>
// 选中日历日期后会执行的回调!!只选择一个日期就会执行,官网写的不清楚
// 主要用这个方法获取到用户选择的初始时间,然后在禁用方法里通过这个时间设置结束时间的禁用时间
const calendarChange = (dates: any) => {let hasSelectDate = dates !== null && dates.length > 0selectData.value = hasSelectDate ? dates[0] : null
}
const disabledDate = (time: any) => {const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳const tempTime = Date.now() - timeRangeif (selectData.value) {// console.log('有开始时间了', selectData.value)const minTime = new Date(selectData.value).getTime()const maxTime = new Date(selectData.value).getTime() + timeRange * 365if (tempTime < maxTime) {return time.getTime() < minTime || time.getTime() > tempTime}return time.getTime() < minTime || time.getTime() > maxTime} else {return time.getTime() >= tempTime}
}

2.限制开始日期和结束日期跨度必须超过2天

 

const disabledAllDate = (time: any) => {const timeRange = 1 * 24 * 60 * 60 * 1000 // 1天时间戳const tempTime = Date.now() - timeRangeif (selectData.value) {// console.log('有开始时间了', selectData.value)const minTime = new Date(selectData.value).getTime() - timeRange * 2const maxTime = new Date(selectData.value).getTime() + timeRange * 2return (time.getTime() > minTime && time.getTime() < maxTime) || time.getTime() >= tempTime} else {return time.getTime() >= tempTime}
}

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue2 + elementui 日期时间选择器 禁止选择当前时间之前的日期及时间,并添加相应校验规则

项目里有这样一个需求&#xff1a;文章设置的预发布时间不得早于当前时间&#xff08;包括日期和时分秒时间&#xff09;。 具体实现如下&#xff1a; 1、在日期时间选择其中设置禁止选中&#xff08;包括日期和时间&#xff09; &#xff08;1&#xff09;在html&#xff0…

vue Element ui日期插件的使用设置日期选择范围是当前时间到一年

<li> <p class"input_date"><el-date-pickerv-model"value1"type"date"placeholder"选择日期"prefix-icon" "format"yyyy-MM-dd"value-format"yyyy-MM-dd":picker-options"pickerO…

ElementUI 日期选择器 datepicker选择范围限制

ElementUI 日期选择器 datepicker选择范围限制 在使用 el-date-picker 的时候&#xff0c;经常会对选择的时间进行一定限制&#xff0c;所以今天就总结了一些范围 1、第一步 给 el-date-picker 组件添加 picker-options 属性&#xff0c;并绑定 对应数据 pickerOptions 2、对…

elementUI 日期选择器限制时间范围

elementUI 日期选择器限制时间范围 &#xff08;借鉴或根据自己需求修改&#xff0c;纯用于自己记录使用并学习&#xff09; 产品需求&#xff0c;新建任务的时候&#xff0c;选择一个名称&#xff0c;然后返回该名称的有效日期&#xff0c;只能在有限日期内选择任务的时间 使…

html 手机扁平化范围选择日历控件,ElementUI 日期选择器 datepicker 选择范围限制

在使用elementUI中日期选择器时,经常会遇到这样的需求——对可选择的时间范围有一定限制,比如我遇到的就是:只能选择今天以前的一年以内的日期。 查阅官方文档,我们发现它介绍的并不详细,下面我们就来详细介绍一下: 1.给 el-date-picker 组件添加 picker-options 属性,并…

Pandas+ChatGPT强强结合诞生PandasAI,数据分析师行业要变天了?

大家好,我是千与千寻,可以叫我千寻,我自己主要的编程语言是Python和Java。 说到Python编程语言,使用Python语言主要使用的是数据科学领域的从业者。 Python编程语言之所以在数据科学领域十分火热,源于Python语言的三大数据科学工作包,NumPy,Pandas,SciPy。 以下是三…

Springboot前后端分离国际化实现-chatgpt

前言 Springboot国际化可以帮助使用者在不同语言环境中构建应用程序&#xff0c;这样应用程序可以有效地适应不同语言文化背景下的用户需求。 此外&#xff0c;Springboot国际化也可以方便多语言应用程序重用和维护&#xff0c;从而减少了系统部署的时间成本和维护的费用。 要实…

以 ChatGPT 为代表的「大模型」会是多大的技术革命?如果要发生技术革命需要具备哪些条件?...

AI大模型在具体场景下的多样价值 AI大模型相当于是通过积累大量知识&#xff0c;最后形成的一个有泛化知识的个体。它跟原来传统意义上的小模型之间的差异&#xff0c;就相当于一个经过了大量通用题库训练的大学生&#xff0c;和一个只在特定专业受训练的技校生的差异。 放眼整…

元宇宙场景下的实时互动RTI技术能力构建

元宇宙可谓是处在风口浪尖&#xff0c;无数的厂商都对元宇宙未来抱有非常美好的憧憬。正因如此&#xff0c;许许多多厂商都在用他们自己的方案&#xff0c;为元宇宙更快、更好的实现&#xff0c;在自己的领域贡献力量。LiveVideoStack 2022北京站邀请到了 ZEGO 即构科技的解决方…

STM32的国产替代,盘点下我知道的国产MCU

电子元件涨价和缺货是多少嵌入式工程师的痛&#xff0c;一年内上游厂家晶圆产能告急能有数十次之多。而MCU更是重灾区&#xff0c;且不说国内有超75%的市场都是被国外产品占据&#xff0c;就是本国内的代理和供应商也是漫天要价&#xff0c;而交期更是长达7个月之久&#xff0c…

为什么说程序员做外包没前途?

之前做过不到3个月的外包&#xff0c;2020的第一天就被释放了&#xff0c;2019年还剩1天&#xff0c;我从外包公司离职了。我就谈谈我个人的看法吧。首先我们定义一下什么是有前途 稳定的工作环境 不错的收入 能够在项目中不断提升自己的技能&#xff08;ps&#xff1a;非技术…

读南山耕夫笔记_5G QoS控制原理专题_基础概念

目录 引子 : 为什么要学习 5G QoS会话控制原理 ? 什么是理解技术原理 ? 整体流程 QoS Flow 的概念 基础概念 - 01 - pkt filter 相关 Packet Filter Set Flow Description Ethernet Flow Description Service data flow filter : sdf-filter , 业务数据流过滤器 Se…

wine - qq无法显示图片头像

来源&#xff1a;https://github.com/wszqkzqk/deepin-wine-ubuntu/issues/222 sudo gedit /etc/sysctl.conf在最下面添加 # IPv6 disabled net.ipv6.conf.all.disable_ipv6 1 net.ipv6.conf.default.disable_ipv6 1 net.ipv6.conf.lo.disable_ipv6 1 sudo sysctl -p 清缓存…

element-UI 使用icon图标或者avatar 头像不显示问题 解决

问题 昨天在写项目的时候&#xff0c;想用avatar 显示头像但是一直不能显示&#xff0c;但是能显示出地标的icon&#xff0c;当我用一模一样的代码使用user的icon的时候&#xff0c;发现又没有显示 跟官网对比了半天的代码发现并没有什么区别&#xff0c;并且有能实现出来的ico…

Android 头像定位图标

前言 相信很多小伙伴都使用过高德地图或者百度地图&#xff0c;其中肯定或多或少的会有通过头像定位图标显示用户位置的需求。比如类似于微信的位置共享或者到位App的用户位置显示。都是采取了通过头像合成头像定位图标的方式。其中可以在服务器上合成直接返回也可以在客户端上…

运用el-avatar显示图片/头像

Element-ui官方 实现 效果 代码实现 html <el-table-column label"头像" width"120"><div class"demo-fit"><div class"block"><el-avatarshape"square":size"50":fit"fit":src…

【uni-app】常用图标、头像汇总

在做小程序的时候&#xff0c;有时候需要各种图标和头像素材&#xff0c;而百度一堆基本都是收费的。所以&#xff0c;整理一些免费好用的图标&#xff0c;头像库&#xff1a; 1、iconfont-阿里巴巴矢量图标库 基本上常用的矢量图标&#xff0c;在这儿都有&#xff0c;而且可…

中学生鸿蒙系统演讲稿,华为鸿蒙 2.0 系统主题演讲公布,详细架构 9 月 11 日揭晓...

IT 之家 8 月 30 日消息 华为 9 月 10 日将举行华为开发者大会 2020&#xff0c;华为官网表示&#xff0c;" 我们将与您分享 HMS Core 5.0 最新进展&#xff0c; 揭开 HarmonyOS 和 EMUI 11 的神秘面纱。 振奋人心的新技术&#xff0c;深入的交流学习机会&#xff0c; 更灵…

[娱乐]华为HWT文件手动修改字体名称

前言 作为白嫖党&#xff0c;白嫖来的华为主题包里的字体&#xff0c;总是会出现一些导入后和显示的不太一样。 欲修改&#xff0c;遂有此文。&#xff08;又是逼死强迫症的一天/狗头保命&#xff09;&#xff08;免责声明&#xff1a;出了问题别找我&#xff0c;改回来就行&a…