elementui 本身也提供了在一个输入框内关联选择时间的组件,非常好使,但无奈项目需要用两个输入框去关联的选择:

                      <el-date-picker
class="datepicker"
size="mini"//尺寸
v-model="startTimed"
type="date"//日期类型
value-format="timestamp"//日期返回的时间格式,时间戳
:picker-options="start_date"//主要的功能,设置时间范围设定
placeholder="选择开始日期">
</el-date-picker>
<span style="display: inline-block;width: 40px;font-size: 12px;text-align: center;">——</span>
<el-date-picker
class="datepicker"
size="mini"
v-model="endTimed"
type="date"
value-format="timestamp"
:picker-options="end_date"
placeholder="选择结束日期">
</el-date-picker>

在data里面:

       startTimed: "",//开始时间
endTimed:"",//结束时间
start_date:{//开始时间范围限定
disabledDate:time => {
if(this.endTimed) {
return time.getTime() > Date.now()-8.64e7 || time.getTime() >= this.endTimed;
}
return time.getTime() > Date.now()-8.64e7;
}
},
end_date:{//结束时间范围限定
disabledDate:time => {
return time.getTime() >= Date.now()-8.64e6 || time.getTime() <= this.startTimed;
}
},
       //主要是disabledDate的取值,返回值;
       //注意8.64e7和8.64e6的区别,后面的包括了当前的一天;

使用elementUI的日期选择框,两选择框关联时间限值的更多相关文章

  1. ElementUI DatePicker 日期选择器控制选择时间范围

    选择今天以及今天之后的日期 <el-date-picker v-model="value1" type="date" placeholder=" ...

  2. 日期选择时两个日期之间的动态控制--My97datepicker日期选择控件

    实现效果:如果先选离店日期,再选入住日期的话,入住日期大于离店日期则离店日期+1天否则离店日期不变,先选入店再选离店离店,离店只能选之后的日期,且两个日期之间最多间隔88天 <div class ...

  3. elementUI实现日期框选中项文本高亮

    { margin: 0; font: 12px "Helvetica Neue" } p.p2 { margin: 0; font: 12px "PingFang SC& ...

  4. Android UI(五)云通讯录项目之联系人列表,带侧滑选择,带搜索框

    作者:泥沙砖瓦浆木匠网站:http://blog.csdn.net/jeffli1993个人签名:打算起手不凡写出鸿篇巨作的人,往往坚持不了完成第一章节.交流QQ群:[编程之美 365234583]h ...

  5. pandas处理时间序列(2):DatetimeIndex、索引和选择、含有重复索引的时间序列、日期范围与频率和移位、时间区间和区间算术

    一.时间序列基础 1. 时间戳索引DatetimeIndex 生成20个DatetimeIndex from datetime import datetime dates = pd.date_rang ...

  6. jQuery实现列表框双向选择操作

    对列表框的操作经常碰到过这样的应用:从左侧的列表框中选中要选的项添加到右侧列表框中,然后提交最终选择的项,对误操作而选中的项还可以执行移除操作.在很多系统中应用比如说求职网站的选择意向工作地区,QQ好 ...

  7. 使用Ajax获取多选框用户选择的值问题

    目录 说明 正文 说明 在web开发过程中,将多选框的值提交到django后台,有两种提交方式: form表单提交 ajax异步提交 我需要使用ajax将复选框的值提交到后台,记录一下当时碰到的问题 ...

  8. 利用js取到下拉框中选择的值

    现在的需求是:下拉框中要是选择加盟商让其继续选择学校,要是选择平台管理员则不需要选择学校.隐藏选择下拉列表. 选择枚举值: /// <summary> /// 平台角色 /// </ ...

  9. [原] XAF 添加日期筛选下拉选择

    1.ListView 添加日期筛选下拉选择,选择指定,可指定日期范围 2.Code using DevExpress.Data.Filtering; using DevExpress.ExpressA ...

随机推荐

  1. Linux服务器部署.Net Core笔记:六、安装MySQL

    接下来我们在 Centos7 系统下使用 yum 命令安装 MySQL,需要注意的是 CentOS 7 版本中 MySQL数据库已从默认的程序列表中移除,所以在安装前我们需要先去官网下载 Yum 资源 ...

  2. 因特尔CPU上TM和R标识的区别

    TM是英文trademark的缩写,TM标志并非对商标起到保护作用,它与R不同,TM表示的是该商标已经向国家商标局提出申请,并且国家商标局也已经下发了<受理通知书>,进入了异议期,这样就可 ...

  3. SpannableStringBuilder实现图文混排

    1.我的后面添加图片 ssb = new SpannableStringBuilder("我的后面添加图片: "); ssb.setSpan(, , Spannable.SPAN_ ...

  4. 软帝学院:一万字的Java基础知识总结大全(实用)

    Java基础总结大全(实用) 一.基础知识: 1.JVM.JRE和JDK的区别: JVM(Java Virtual Machine):java虚拟机,用于保证java的跨平台的特性. java语言是跨 ...

  5. 面试连环炮系列(一):如何保证Redis高可用和高并发

    如何保证Redis高可用和高并发? Redis主从架构,一主多从,可以满足高可用和高并发.出现实例宕机自动进行主备切换,配置读写分离缓解Master读写压力. Redis高可用方案具体怎么实施? 使用 ...

  6. Spring Boot中使用Swagger2构建强大的RESTful(最新全,无坑)

    1:说明 网上这类文章 太多, 一搜一大把 ,但是要不是知识太过于老旧,就是配置没有说名清楚,你的项目按照他的配置却不能正常运行: 所以本文的目的: 配置swagger 2  那swagger 1 不 ...

  7. 一起学SpringMVC之异常处理

    在系统开发过程中,异常处理是不可避免,如果异常处理不好,会给用户造成很差的体验,本文主要讲解在SpringMVC开发过程中,异常处理的相关知识点,仅供学习分享使用,如有不足之处,还请指正. 概述 在S ...

  8. JavaWeb入门——在Linux环境下安装Tomcat服务器

    JavaWeb入门——在Linux环境下安装Tomcat服务器 摘要:本文主要学习了如何在Linux环境下安装Tomcat服务器. 准备工作 检查Java环境变量 检查系统是否配置了Java的环境变量 ...

  9. GC与内存分配策略

    一.GC 第一步:判断对象是否已死?有两种方法:第一种是引用计数法,即给对象添加一个引用计数器,当被引用时,计数器就+1:当引用失效时,就-1:当计数器为0时,代表对象没有被引用.但是计数器的缺点就是 ...

  10. Oracle VirtualBox安装CentOS 8

    1.下载CentOS CentOS下载地址: https://wiki.centos.org/Download 这里以CentOS8为例 选择一个比较快的地址,这里以jdcloud mirror为例 ...