背景: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 时间日期格式,选择范围限制的更多相关文章

  1. Java练习 SDUT-2246_时间日期格式转换

    时间日期格式转换 Time Limit: 1000 ms Memory Limit: 65536 KiB Problem Description 对于日期的常用格式,在中国常采用格式的是"年 ...

  2. C#时间日期格式大全

    C#时间/日期格式大全,C#时间/日期函数大全 有时候我们要对时间进行转换,达到不同的显示效果 默认格式为:2016-7-1 14:33:34 如果要换成成201607,07-2016,2016-7- ...

  3. Java基础/时间日期格式

    Java时间日期格式转换 一.Date转String和String转Date 参考博客:https://www.cnblogs.com/sharpest/p/7879377.html public s ...

  4. 【Oracle】Oracle时间日期格式

    to_date("要转换的字符串","转换的格式")   两个参数的格式必须匹配,否则会报错. 即按照第二个参数的格式解释第一个参数. to_char(日期,& ...

  5. [js] js和C# 时间日期格式转换

    下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整 ...

  6. ORACLE时间日期格式使用总结(参考网上资料汇总)

    Oracle时间日期操作 sysdate+(5/24/60/60) 在系统时间基础上延迟5秒 sysdate+5/24/60 在系统时间基础上延迟5分钟 sysdate+5/24 在系统时间基础上延迟 ...

  7. Java时间日期格式转换 转自:http://www.cnblogs.com/edwardlauxh/archive/2010/03/21/1918615.html

    Java时间格式转换大全 import java.text.*; import java.util.Calendar; public class VeDate { /** * 获取现在时间 * * @ ...

  8. js和C# 时间日期格式转换

    下午在搞MVC和EXTJS的日期格式互相转换遇到了问题,我们从.NET服务器端序列化一个DateTime对象的结果是一个字符串格式,如 '/Date(1335258540000)/' 这样的字串. 整 ...

  9. Java中关于时间日期格式保存到mysql的问题

    首先在设置数据库的时间日期字段的时候要先确定好采用何种类型,DATETIME. TIMESTAMP.DATE.TIME.YEAR. 其中datetime.time用的比较多,对应java中生成的poj ...

  10. Date类与日期格式

    Date类概述: 表示特定的瞬间,精确到毫秒. Date()分配 Date 对象并初始化此对象,以表示分配它的时间(精确到毫秒).Date(long date)分配 Date 对象并初始化此对象,以表 ...

随机推荐

  1. FreeSWITCH使用soundtouch进行变声

    操作系统 :CentOS 7.6_x64 FreeSWITCH版本 :1.10.9   FreeSWITCH里面有个mod_soundtouch模块,支持通话实时变声,今天整理下CentOS 7环境下 ...

  2. 开源云原生平台对比 KubeSphere vs Rainbond

    最近因为工作需要,需要找一个功能完善的云原生应用平台,经过自己筛选和朋友推荐,剩下 KubeSphere和Rainbond ,这两个产品都是基于 Kubernetes 之上构建的云原生应用平台,功能都 ...

  3. rhce练习题容易错的地方

    rhce练习题里容易错的地方 使用导航器的时候,ssh连接 因为导航器是一个工具,生成一个容器,在容器里面运行playbook 安装软件包的时候,多个软件包使用循环loop loop的格式 - hos ...

  4. 在阿里云WINDOWS机器上部署的JAVA SpringBoot 时不时的无效 。

    用telnet 能通.但代码的HTTP 访问不了. 解决方法,在运行时加-Dserver.address=0.0.0.0,让它监听所有: java -Dserver.address=0.0.0.0 - ...

  5. vs2019安装使用Python3.9教程

    现在vs2019只支持到Python3.7,如果要使用3.9,需要自己下载Python3.9的包 步骤: 一.在开始菜单中找到Microsoft Store搜索"Python3.9" ...

  6. go随笔

    1)声明在函数内部,是函数的本地值,类似private 2)声明在函数外部,是对当前包可见(包内所有.go文件都可见)的全局值,类似protect 3)声明在函数外部且首字母大写是所有包可见的全局值, ...

  7. 如何去掉安装IDEA生成的鼠标右键

    IDEA去掉右键 在安装IDEA或其它Intellij软件时,因为整个安装流程都是英文的环境,有童鞋稍不注意,就会把Intellij系列软件自动生成鼠标右键给选上 但问题来了,Intellij系列软件 ...

  8. 『手撕Vue-CLI』完善提示信息

    前言 经过『手撕Vue-CLI』自动安装依赖,已经实现了自动安装依赖的功能. 然而,虽然项目已复制并安装依赖,但其提示信息并不够友好,于是我试着去运行了一下vue create,发现其提示信息是这样的 ...

  9. unity Entitas框架简介

    插件及文档:https://github.com/sschmid/Entitas-CSharp/wiki/Home 资料: https://zhuanlan.zhihu.com/p/78155704 ...

  10. Android程序获取鸿蒙手机设备信息(是否鸿蒙手机、版本号、小版本号等)

    1.效果图 鸿蒙手机 --> 关于手机的截图: Android程序获取鸿蒙手机设备信息的截图: 2.实现 本案例DEMO的实现主要借鉴了网上现有的资料: https://blog.csdn.ne ...