el-date-picker 时间日期格式,选择范围限制
背景:ElementUI的 el-date-picker 使用时,有时候想要限制用户选择的时间范围,但是用的是datetimerange类型的选择器,不想单独写两个起始的选择器。我发现网上的方案大部分都是单独写两个,个别使用datetimerange的选择器说的也不是很清楚,也有一些bug,这里贴出我的解决办法供大家参考;
使用picker-options属性的disabledDate去控制范围。返回true代表禁止,就无法点击选择器的确认按钮。

<el-date-picker
:picker-options="pickerOptions"
size="medium"
v-model="searchTime"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
></el-date-picker>
data() {
return {
maxDate: null,
minDate: null,
pickerOptions: {
// 当我们选择日期时的回调方法。返回两个日期的最大值和最小值,第一次返回一个值,第二次返回两个值
onPick: ({ maxDate, minDate }) => {
//当我们选择两个值的时候,就认为用户已经选择完毕
if (maxDate != null && minDate != null) {
this.maxDate = maxDate;
this.minDate = minDate;
}
},
disabledDate: time => {
let maxDate = this.maxDate;
let minDate = this.minDate;
if (maxDate != null && minDate != null) {
let days = maxDate.getTime() - minDate.getTime();
//计算完之后必须清除,否则选择器一直处于禁止选择的状态
this.maxDate = null;
this.minDate = null;
return parseInt(days / (1000 * 60 * 60 * 24)) > 30;
} else {
//设置当前时间后的时间不可选
return time.getTime() > Date.now();
}
}
}
};
},
当我们选择的范围超过30天时,确认按钮无法点击

当小于或等于30天时,可以确认

el-date-picker 时间日期格式,选择范围限制的更多相关文章
- Java练习 SDUT-2246_时间日期格式转换
时间日期格式转换 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 对于日期的常用格式,在中国常采用格式的是"年 ...
- C#时间日期格式大全
C#时间/日期格式大全,C#时间/日期函数大全 有时候我们要对时间进行转换,达到不同的显示效果 默认格式为:2016-7-1 14:33:34 如果要换成成201607,07-2016,2016-7- ...
- Java基础/时间日期格式
Java时间日期格式转换 一.Date转String和String转Date 参考博客:https://www.cnblogs.com/sharpest/p/7879377.html public s ...
- 【Oracle】Oracle时间日期格式
to_date("要转换的字符串","转换的格式") 两个参数的格式必须匹配,否则会报错. 即按照第二个参数的格式解释第一个参数. to_char(日期,& ...
- [js] js和C# 时间日期格式转换
下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整 ...
- ORACLE时间日期格式使用总结(参考网上资料汇总)
Oracle时间日期操作 sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdate+5/24 在系统时间基础上延迟 ...
- Java时间日期格式转换 转自:http://www.cnblogs.com/edwardlauxh/archive/2010/03/21/1918615.html
Java时间格式转换大全 import java.text.*; import java.util.Calendar; public class VeDate { /** * 获取现在时间 * * @ ...
- js和C# 时间日期格式转换
下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整 ...
- Java中关于时间日期格式保存到mysql的问题
首先在设置数据库的时间日期字段的时候要先确定好采用何种类型,DATETIME. TIMESTAMP.DATE.TIME.YEAR. 其中datetime.time用的比较多,对应java中生成的poj ...
- Date类与日期格式
Date类概述: 表示特定的瞬间,精确到毫秒. Date()分配 Date 对象并初始化此对象,以表示分配它的时间(精确到毫秒).Date(long date)分配 Date 对象并初始化此对象,以表 ...
随机推荐
- itestwork(爱测试)开源一站式接口测试&敏捷测试工作站 9.0.0 RC2 发布,重大升级
(一)itest 简介 itest work (爱测试) 一站式工作站让测试变得简单.敏捷.itest work 包含极简的任务管理,测试管理,缺陷管理,测试环境管理,接口测试,接口Mock 6合1 ...
- python获取豆瓣电影TOP250的所有电影的相关信息
参考文档:https://weread.qq.com/web/reader/37132a705e2b2f37196c138k98f3284021498f137082c2e 说明:我才接触网络爬虫,在看 ...
- Vue学习:5.v-bind使用
第一节算是对v-bind的粗略了解,仅仅是列举了v-bind的使用.这一节将更详细的了解v-bind的具体用法. v-bind是 Vue.js 中常用的指令之一,用于动态地绑定属性或者表达式到 HTM ...
- Python读取YAML配置数据
python编写的一些脚本需要一些简单配置时可以使用yaml文件进行设置.本文将介绍如何使用pyyaml进行读取配置数据. 首先安装pyyaml pip install pyyaml 简单使用下pyy ...
- wireshark常用过滤指令
前言 wireshark是一款高效且免费的网络封包分析软件,现就自己使用过的过滤表达式进行记录,随时更新. 正文 与.或.非指令 与:and && 示例:tcp and ip.src ...
- ComfyUI进阶篇:ComfyUI核心节点(一)
ComfyUI进阶篇:ComfyUI核心节点(一) 前言: 学习ComfyUI是一场持久战.当你掌握了ComfyUI的安装和运行之后,会发现大量五花八门的节点.面对各种各样的工作流和复杂的节点种类,可 ...
- 深度解读昇腾CANN内存复用技术,降低网络内存占用
本文分享自华为云社区<深度解读昇腾CANN内存复用技术,降低网络内存占用>,作者: 昇腾CANN. 随着大模型的兴起,神经网络规模不断扩大,对内存资源的消耗也越来越高,如何降低AI算法的内 ...
- P1681
和上一道题差不多,要注意一些细节 #include<iostream> #include<utility> using namespace std; typedef long ...
- ComfyUI进阶:Comfyroll插件 (一)
ComfyUI进阶:Comfyroll插件 (一) 前言: 学习ComfyUI是一场持久战,而Comfyroll Studio 是一款功能强大的自定义节点集合,专为 ComfyUI 用户打造,旨在提供 ...
- 高程读后感(三)— JS对象实现继承的6种模式及其优缺点
目录 1.原型链 1.1.默认的原型 1.2.原型和实例的关系 1.3.原型链的问题 2.借用构造函数 2.1.传递参数 2.2.借用构造函数的问题 3.组合继承 4.原型式继承 5.寄生式继承 6. ...