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 字符编码规则
May 04 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
JS 对输入框进行限制(常用的都有)
Jul 30 Javascript
js简单实现删除记录时的提示效果
Dec 05 Javascript
一些老手都不一定知道的JavaScript技巧
May 06 Javascript
js判断文本框剩余可输入字数的方法
Feb 04 Javascript
javascript+css3 实现动态按钮菜单特效
Feb 06 Javascript
微信小程序前端源码逻辑和工作流
Sep 25 Javascript
JS复制对应id的内容到粘贴板(Ctrl+C效果)
Jan 23 Javascript
js学习总结_基于数据类型检测的四种方式(必看)
Jul 04 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
layui-table对返回的数据进行转变显示的实例
Sep 04 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
PHP - Html Transfer Code
2006/10/09 PHP
ASP知识讲座四
2006/10/09 PHP
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
php的日期处理函数及uchome的function_coomon中日期处理函数的研究
2011/01/12 PHP
php全角字符转换为半角函数
2014/02/07 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
php面向对象值单例模式
2016/05/03 PHP
PHP实现一个简单url路由功能实例
2016/11/05 PHP
php redis实现对200w用户的即时推送
2017/03/04 PHP
分析php://output和php://stdout的区别
2018/05/06 PHP
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
jQuery Ajax()方法使用指南
2014/11/19 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
2016/12/01 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
浅谈Vue使用Cascader级联选择器数据回显中的坑
2020/10/31 Javascript
[51:14]LGD vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.21
2018/08/22 DOTA
在Python的Django框架上部署ORM库的教程
2015/04/20 Python
Python编程实现及时获取新邮件的方法示例
2017/08/10 Python
Python线程创建和终止实例代码
2018/01/20 Python
python 获取list特定元素下标的实例讲解
2018/04/09 Python
Python使用爬虫爬取静态网页图片的方法详解
2018/06/05 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
pytorch 实现在预训练模型的 input上增减通道
2020/01/06 Python
详解pandas映射与数据转换
2021/01/22 Python
中东最大的在线宠物店:Dubai Pet Food
2020/06/11 全球购物
校园十佳歌手策划书
2014/01/22 职场文书
便利店投资创业计划书
2014/02/08 职场文书
干部选拔任用方案
2014/05/26 职场文书
项目申报专员岗位职责
2014/07/09 职场文书
社区平安建设汇报材料
2014/08/14 职场文书
目标责任书格式范文
2015/05/11 职场文书
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
MySQL范围查询优化的场景实例详解
2022/06/10 MySQL