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 对象并初始化此对象,以表 ...
随机推荐
- .NET 6+Semantic Kernel快速接入OpenAI接口
大家好,我是Edison. 今天我们快速地使用Semantic Kernel来集成OpenAI,使用20来行代码快速实现一个简单的AIGC应用. 这里,我就不多介绍Semantic Kernel了,包 ...
- React 的 KeepAlive 探索
什么是 KeepAlive? 用过 Vue 的童鞋都知道 Vue 官方自带了 Keep-Alive 组件,它能够使组件在切换时仍能保留原有的状态信息,并且有专门的生命周期方便去做额外的处理.该组件在很 ...
- linux上使用webdav
webdav 干什么用的? 对于我来说,主要是用来同步文件的,n年以前,那时候还啥都不懂,要分享一个文件都是用qq/或者微信发,那时候就一个手机一个电脑,而且文件大部分是分享给认识的人. qq分享完全 ...
- minos 2.1 中断虚拟化——ARMv8 异常处理
首发公号:Rand_cs 越往后,交叉的越多,大多都绕不开 ARMv8 的异常处理,所以必须得先了解了解 ARMv8 的异常处理流程 先说一下术语,从手册中的用词来看,在 x86 平台,一般将异常和中 ...
- 剑指Offer-48.不用加减乘除做加法(C++/Java)
题目: 写一个函数,求两个整数之和,要求在函数体内不得使用+.-.*./四则运算符号. 分析: 将加法还原成最原始的计算方法,也就是分别计算进位和非进位的和,最后再将这两部分合起来,便是和.我们可以利 ...
- C# .NET 生成国密私钥公钥对
使用的工具类: using Org.BouncyCastle.Asn1; using Org.BouncyCastle.Asn1.GM; using Org.BouncyCastle.Asn1.X9; ...
- 开源的Datadog?可观测性平台SigNoz是否名副其实?
SigNoz号称自己是开源领域的Datadog,基于OpenTelemetry做了一套可观测性方案.夜莺从V6版本开始,也希望做全栈可观测性方案,巧了,大家目标一致,今天我们一起来对SigNoz做个初 ...
- 1004 成绩排名 PAT Basic Level
我的个人博客地址 azoux's blog 读入 n(>0)名学生的姓名.学号.成绩,分别输出成绩最高和成绩最低学生的姓名和学号. 输入格式: 每个测试输入包含 1 个测试用例,格式为 第 1 ...
- 在线Base64转文件、文件转Base64工具
在线Base64转换神器,一键实现Base64编码与文件互转!支持图片.文档等各类文件,快速准确,安全无服务器存储.拖拽上传,轻松编码解码,提升开发效率.跨平台兼容,移动端友好,让数据转换再无障碍. ...
- mongodb连接类
import com.mongodb.client.MongoClient; import com.mongodb.client.MongoClients; import com.mongodb.cl ...