element-ui 时间选择器限制范围的实现(随动)


Posted in Javascript onJanuary 09, 2019

需求:

选择日期范围,但是选择范围需要在一周以内。举个栗子:假设选第一个日期为1月17日,那么1月11日以前、1月23号以后的日期都需要设为禁选状态。

方法:

考虑到有两种设计方式:

1、用两个独立时间选择器控制,实现起来比较混乱。
2、用日期范围选择器。

第一种方式没有做demo,有特殊需求的小伙伴请留言。这里选择使用日期范围选择器,使用起来可以预见代码会清爽很多。

效果图:

element-ui 时间选择器限制范围的实现(随动)

代码:

<el-date-picker
  v-model="datePick"
  type="daterange"
  value-format='yyyy-MM-dd'
  size="small"
  :picker-options="pickerOptions"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期">
</el-date-picker>
data() {
 let _minTime = null
 let _maxTime = null
 return {
  datePick: [new Date().format("yyyy-MM-dd") ,new Date().format("yyyy-MM-dd")], //默认选择当天,看个人需求
  pickerOptions:{
   onPick(time){
    // 如果选择了只选择了一个时间
    if (!time.maxDate) {
     let timeRange = 6*24*60*60*1000 // 6天
     _minTime = time.minDate.getTime() - timeRange // 最小时间
     _maxTime = time.minDate.getTime() + timeRange // 最大时间
    // 如果选了两个时间,那就清空本次范围判断数据,以备重选
    } else {
     _minTime = _maxTime = null
    }
   },
   disabledDate(time) {
    // onPick后触发
    // 该方法会轮询当3个月内的每一个日期,返回false表示该日期禁选
    if(_minTime && _maxTime){
     return time.getTime() < _minTime || time.getTime() > _maxTime
    }
   }
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery getJSON 处理json数据的代码
Jul 26 Javascript
javascript学习笔记(五)正则表达式
Apr 08 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
Aug 07 Javascript
js jquery分别实现动态的文件上传操作按钮的添加和删除
Jan 13 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
Express.JS使用详解
Jul 17 Javascript
JS动态修改iframe内嵌网页地址的方法
Apr 01 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
JS中作用域和变量提升(hoisting)的深入理解
Oct 31 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
Mar 17 Javascript
vue.js移动端tab组件的封装实践实例
Jun 30 Javascript
vue实现在线学生录入系统
May 30 Javascript
JavaScript学习笔记之DOM基础操作实例小结
Jan 09 #Javascript
如何解决webpack-dev-server代理常切换问题
Jan 09 #Javascript
JavaScript学习笔记之数组基本操作示例
Jan 09 #Javascript
浅谈webpack性能榨汁机(打包速度优化)
Jan 09 #Javascript
Node.js的进程管理的深入理解
Jan 09 #Javascript
从vue源码看props的用法
Jan 09 #Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 #Javascript
You might like
一些花式咖啡的配方
2021/03/03 冲泡冲煮
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
php类常量的使用详解
2013/06/08 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
php获取目标函数执行时间示例
2014/03/04 PHP
PHP+Mysql+Ajax+JS实现省市区三级联动
2014/05/23 PHP
HTML-CSS群中单选引发的“事件”
2007/03/05 Javascript
js特效,页面下雪的小例子
2013/06/17 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
全面了解addEventListener和on的区别
2016/07/14 Javascript
浅谈$('div a') 与$('div&gt;a')的区别
2016/07/18 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
jQuery实现返回顶部按钮和scroll滚动功能[带动画效果]
2017/07/05 jQuery
Vue+Vux项目实践完整代码
2017/11/30 Javascript
Angular Material Icon使用详解
2018/11/07 Javascript
layui固定下拉框的显示条数(有滚动条)的方法
2019/09/10 Javascript
[40:17]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第一场
2018/04/06 DOTA
[34:41]夜魇凡尔赛茶话会 第二期02:你画我猜
2021/03/11 DOTA
django 创建过滤器的实例详解
2017/08/14 Python
django 将model转换为字典的方法示例
2018/10/16 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python爬虫中多线程的使用详解
2019/09/23 Python
jupyternotebook 撤销删除的操作方式
2020/04/17 Python
Django视图、传参和forms验证操作
2020/07/15 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
ZINVO手表官网:男士和女士手表
2019/03/10 全球购物
Solaris操作系统的线程机制
2012/12/23 面试题
城市轨道专业个人求职信范文
2013/09/23 职场文书
住宅质量保证书
2014/04/29 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
2014年党支部承诺书
2014/05/30 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
上学路上观后感
2015/06/16 职场文书
2015军训通讯稿大全
2015/07/18 职场文书
vue中控制mock在开发环境使用,在生产环境禁用方式
2022/04/06 Vue.js
css让页脚保持在底部位置的四种方案
2022/07/23 HTML / CSS