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 相关文章推荐
javascript 面向对象继承
Nov 26 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
JavaScript实现网页图片等比例缩放实现代码及调用方式
Feb 25 Javascript
javascript实现十六进制颜色值(HEX)和RGB格式相互转换
Jun 20 Javascript
javascript中CheckBox全选终极方案
May 20 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
Jan 23 Javascript
jQuery实现参数自定义的文字跑马灯效果
Aug 15 jQuery
Koa 使用小技巧(小结)
Oct 22 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
Sep 03 Javascript
防止Layui form表单重复提交的实现方法
Sep 10 Javascript
微信小程序之 catalog 切换实现解析
Sep 12 Javascript
在vue中使用Echarts画曲线图的示例
Oct 03 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
多人战的战术与战略
2020/03/04 星际争霸
ThinkPHP登录功能的实现方法
2014/08/20 PHP
Mac系统完美安装PHP7详细教程
2017/06/06 PHP
浅谈laravel 5.6 安装 windows上使用composer的安装过程
2019/10/18 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
设置checkbox为只读(readOnly)的两种方式
2013/10/11 Javascript
JavaScript和CSS交互的方法汇总
2014/12/02 Javascript
详解AngularJS控制器的使用
2016/03/09 Javascript
jQuery选择器基础入门教程
2016/05/10 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
2016/05/23 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
详解angular element()方法使用
2017/04/08 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
从零开始学习Node.js系列教程六:EventEmitter发送和接收事件的方法示例
2017/04/13 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
2017/06/16 Javascript
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
JS监控关闭浏览器操作的实例详解
2017/09/12 Javascript
layui.js实现的表单验证功能示例
2017/11/15 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
Vue2.0 实现页面缓存和不缓存的方式
2019/11/12 Javascript
javascript前端和后台进行数据交互方法示例
2020/08/07 Javascript
深入解析Python编程中JSON模块的使用
2015/10/15 Python
Python数组定义方法
2016/04/13 Python
Python文件与文件夹常见基本操作总结
2016/09/19 Python
python中实现延时回调普通函数示例代码
2017/09/08 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
攀岩、滑雪、徒步旅行装备:Black Diamond Equipment
2019/08/16 全球购物
美国踏板车和轻便摩托车销售网站:Mega Motor Madness
2020/02/26 全球购物
平民服装店创业计划书
2014/01/17 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
个人剖析材料范文
2014/09/30 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书
经典爱情感言
2015/08/03 职场文书
励志语录:只有自己足够强大,才能不被别人践踏
2020/01/09 职场文书
唤醒紫霞仙子,携手再游三界!大话手游X《大话西游》电影合作专属剧情任务
2022/04/03 其他游戏