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

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

在使用 el-date-picker 的时候,经常会对选择的时间进行一定限制,所以今天就总结了一些范围

1、第一步 给 el-date-picker 组件添加 picker-options 属性,并绑定 对应数据 pickerOptions

在这里插入图片描述

2、对绑定的数据进行限制

单个选择框的限制

2.1 设置今天及最近一年内的日期(包含今天)

data(){
return {
pickerOptions:{disabledDate(time){let nowDate = (new Date()).toString()  // 当前时间转字符串let nowDateYear = (new Date()).getFullYear()  // 当前时间的年份let oneYearAgoDate = nowDate.replace(nowDateYear,nowDateYear-1)  //字符串年份替换为一年前let oneYear = new Date(oneYearAgoDate).getTime()  //一年前字符串转为时间戳return time.getTime() > Date.now() || time.getTime() < oneYear}},}}

2.2 设置今天及今天之后的日期

data(){
return {
pickerOptions:{disabledDate(time){return time.getTime() < Date.now() - 8.64e7;}},}}

2.3 设置今天及今天以前的日期

data(){
return {
pickerOptions:{disabledDate(time){return time.getTime() > Date.now() - 8.64e7;}},}}

2.4 设置选择今天之后的日期(不包含当天时间)

data(){
return {
pickerOptions:{disabledDate(time){return time.getTime() < Date.now();}},}}

2.5 选择今天之前的时间(不包含当天时间)

data(){
return {
pickerOptions:{disabledDate(time){return time.getTime() > Date.now();}},}}

2.6 设置选择三个月之前到今天的日期

data(){
return {
pickerOptions:{disabledDate(time){let nowDate = (new Date()).getTime();let three = 90*24*3600*1000;let threeMonths = nowDate - three;return time.getTime() > Date.now() || time.getTime() < threeMonths}},}}

两个日期选择框的限制

3.1 设置开始时间不能大于结束时间 (且只能选择当前时间之前的日期)

data(){return {pickerOptions0: {disabledDate: (time) => {if (this.value2) {return time.getTime() > Date.now() || time.getTime() > this.value2;} else {return time.getTime() > Date.now();}}},pickerOptions1: {disabledDate: (time) => {return time.getTime() < this.value1 || time.getTime() > Date.now();}}}    
}

3.2 设置开始时间不能大于结束时间(可以选择所有日期)

data(){return {pickerOptions0: {disabledDate: (time) => {if (this.value2) {return time.getTime() > this.searchForm.endTime}}},pickerOptions1: {disabledDate: (time) => {return time.getTime() < this.searchForm.startTime}}}    
}

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

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

相关文章

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…

华为电脑终于又能搭载正版 Windows 系统了!

整理 | 刘静 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 微软已经获得向华为出口软件的许可证 我们是否还停留在华为被美国列入“实体管制名单”的事件中&#xff1f; 然而就在2019年11月21日&#xff0c;据路透社报道&#xff0c;美国科技行业的“龙头老大”…

华为metebook 电脑应用市场应用无法下载

错误信息如下&#xff1a; 解决方案&#xff1a; 通过PC应用市场右上角下载列表 > 下载目录 > 右键点击AppGallery文件夹 > 属性 > 安全 > 查看当前文件夹是否有名为Authenticated Users的组或用户名 如果有组或用户名为Authenticated Users&#xff0c;请确…

协同办公“战役”,华为输了吗?

近日&#xff0c;华为“Link Now”APP发布停运公告&#xff0c;引发热议&#xff0c;宣布&#xff1a;自2022年12月16日24时起&#xff0c;Link Now业务将正式停止运营与服务。 作为值得尊重的民族企业&#xff0c;华为的一举一动&#xff0c;牵动着无数人的心。 Link Now是华…