vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内
举例:只能选今天或者今天之后的时间(如下图)
<el-date-picker clearable
v-model="form.limitTime"
type="date"
:readonly="isDetail"
value-format="yyyy-MM-dd"
:picker-options="expireTimeOPtion"
placeholder="请选择处理期限">
</el-date-picker>
注意::picker-options="expireTimeOPtion"
一、只能选择今天或者今天之后的时间
data() {
return {
expireTimeOPtion: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7; //如果没有后面的-8.64e7就是不可以选择今天的
}
},
}
}
二、今天以及今天之前的日期
data() {
return {
expireTimeOPtion: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
}
},
}
三、只能选取今天往后三天内
data() {
return {
expireTimeOPtime: {
disabledDate(time) {
const times = new Date(new Date().toLocaleDateString()).getTime() + 3 * 8.64e7 - 1
return time.getTime() < Date.now() - 8.64e7 || time.getTime() > times // 如果没有后面的-8.64e7就是不可以选择今天的
}
}
}
}
完结撒花!赶快试试吧!
作者:微微一笑绝绝子
出处:https://www.cnblogs.com/wwyxjjz/p/16922199.html
本博客文章均为作者原创,转载请注明作者和原文链接。
vue element 日期范围选择器限制:只能选今天之前的时间 || 只能选今天之后的时间 || 选取今天往后三天内的更多相关文章
- 在微信框架模块中,基于Vue&Element前端,通过动态构建投票选项,实现单选、复选的投票操作
最近把微信框架的前端改造一下,在原来基于Bootstrap框架基础上的微信后台管理,增加一套Vue&Element的前端,毕竟Vue的双向绑定开发起来也还是很方便的,而且Element本身也提 ...
- vue知识点----element UI+vue关于日期范围选择的操作,picker-options属性的使用
需求场景如下: 指定起止日期,后选的将会受到先选的限制 不同的日期选择器,不过也存在关联关系 实现方法不难,利用了 change 事件,动态改变 picker-options 中的 disableDa ...
- element 日期时间选择器type = "datetimerange",限制时间的选择范围
这里限制了只能选择一周的时间 pickerOptions:{ onPick(time){ // 如果选择了只选择了一个时间 i ...
- 在基于ABP框架的前端项目Vue&Element项目中采用日期格式处理,对比Moment.js和day.js的处理
Day.js 是一个轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样. 如果您曾经用过 Moment.js, 那么您已经知道如何使用 Day.js ...
- 循序渐进VUE+Element 前端应用开发(25)--- 各种界面组件的使用(1)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
- 封装Vue Element的可编辑table表格组件
前一段时间,有博友在我那篇封装Vue Element的table表格组件的博文下边留言说有没有那种"表格行内编辑"的封装组件,我当时说我没有封装过这样的组件,因为一直以来在实际开发 ...
- 循序渐进VUE+Element 前端应用开发(5)--- 表格列表页面的查询,列表展示和字段转义处理
在我们一般开发的系统界面里面,列表页面是一个非常重要的综合展示界面,包括有条件查询.列表展示和分页处理,以及对每项列表内容可能进行的转义处理,本篇随笔介绍基于Vue +Element基础上实现表格列表 ...
- 封装Vue Element的table表格组件
上周分享了几篇关于React组件封装方面的博文,这周就来分享几篇关于Vue组件封装方面的博文,也好让大家能更好地了解React和Vue在组件封装方面的区别. 在封装Vue组件时,我依旧会交叉使用函数式 ...
- 封装Vue Element的form表单组件
前两天封装了一个基于vue和Element的table表格组件,阅读的人还是很多的,看来大家都是很认同组件化.高复用这种开发模式的,毕竟开发效率高,代码优雅,逼格高嘛.虽然这两天我的心情很糟糕,就像& ...
- 循序渐进VUE+Element 前端应用开发(26)--- 各种界面组件的使用(2)
在我们使用Vue+Element开发前端的时候,往往涉及到很多界面组件的使用,其中很多直接采用Element官方的案例即可,有些则是在这个基础上封装更好利用.更少代码的组件:另外有些则是直接采用第三方 ...
随机推荐
- Java进阶篇——springboot2源码探究
1.@EnableAutoConfiguration 除了元注解之外,EnableAutoConfiguration包含了两大重要部分: 1)@AutoConfigurationPackage注解 该 ...
- (11)go-micro微服务雪花算法
目录 一 雪花算法介绍 二 雪花算法优缺点 三 雪花算法实现 四 最后 一 雪花算法介绍 雪花算法是推特开源的分布式ID生成算法,用于在不同的机器上生成唯一的ID的算法. 该算法生成一个64bit的数 ...
- 8KB的C#贪吃蛇游戏热点答疑和.NET7版本
在之前的一篇文章<看我是如何用C#编写一个小于8KB的贪吃蛇游戏>中,介绍了在.NET Core 3.0的环境下如何将贪吃蛇游戏降低到8KB.不过也有很多小伙伴提出了一些疑问和看法,主要是 ...
- wsl2和ArchLinux的安装
版权声明:本文章参考了哔哩哔哩稿件BV1sW411v7VZ,如侵权请主动联系删除 1.Wsl2的安装 启用适用于 Linux 的 Windows 子系统 在终端运行:dism.exe /online ...
- Map集合概述-Map常用子类
Map集合概述 现实生活中,我们常会看到这样的一种集合︰IP地址与主机名,身份证号与个人,系统用户名与系统用户对象等,这种--对应的关系,就叫做映射.Java提供了专门的集合类用来存放这种对象关系的对 ...
- GF_CLR初始用 - 正式版
参照:DeerGF_Wolong框架使用教程 与tackor老哥的踩坑日记所编写,第二次尝试,总结第一次经验重新来. 点击链接加入群聊[Gf_Wolong热更集合] 一. 部署 HybridCLR(W ...
- 12月12日内容总结——Django之数据增删改查、Django请求生命周期流程图、Django路由层(路由匹配、转换器、正则匹配)、反向解析
目录 一.可视化界面之数据增删改查 二.django请求生命周期流程图 三.django路由层 1.路由匹配 2.转换器 3.正则匹配 不同版本的区别 正则匹配斜杠导致的区别 4.正则匹配的无名有名分 ...
- Java + SikuliX 基于图像实现自动化测试
转载请注明出处️ 作者:测试蔡坨坨 原文链接:caituotuo.top/6d2908e8.html 你好,我是测试蔡坨坨. 由于目前大多数GUI工具均需要依赖于程序类型进行特征属性识别,例如:Sel ...
- JSP第八次作业
数据库test 中建个表 stu(stuid 主键 自动增长 ,用户名,密码,年龄) 1.设计一个注册页面,实现用户注册功能2.设计一个登陆页面,实现用户名密码登陆3.两个页面可以互相超链接 1 pa ...
- KMP 算法 再次学习
c++ 版后面再补 package cn.kbug.dynamic; import java.util.Arrays; /** * KMP 算法本质上是对 搜索的字符串做优化,然后在匹配的时候,能做到 ...