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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
sogou地图API用法实例教程
Sep 11 Javascript
node.js中的fs.readSync方法使用说明
Dec 17 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
bootstrap table实例详解
Jan 06 Javascript
vue组件(全局,局部,动态加载组件)
Sep 02 Javascript
小程序文字跑马灯效果
Dec 28 Javascript
微信小程序实现卡片左右滑动效果的示例代码
May 01 Javascript
D3.js(v3)+react 实现带坐标与比例尺的柱形图 (V3版本)
May 09 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
Promise静态四兄弟实现示例详解
Jul 07 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递归实现无限分类生成下拉列表的函数
2010/08/08 PHP
解析php中如何调用用户自定义函数
2013/08/06 PHP
PHP 动态生成静态HTML页面示例代码
2014/01/15 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
php实现上传图片保存到数据库的方法
2015/02/11 PHP
PHP获取一段文本显示点阵宽度和高度的方法
2015/03/12 PHP
PHP中遇到的时区问题解决方法
2015/07/23 PHP
thinkPHP框架实现生成条形码的方法示例
2018/06/06 PHP
自动完成JS类(纯JS, Ajax模式)
2009/03/12 Javascript
javascript 函数调用规则
2009/08/26 Javascript
JavaScript 基础篇(一)
2012/03/30 Javascript
jquery.boxy弹出框(后隔N秒后自动隐藏/自动跳转)
2013/01/15 Javascript
ANT 压缩(去掉空格/注释)JS文件可提高js运行速度
2013/04/15 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
jQuery实现带滚动线条导航效果的方法
2015/01/30 Javascript
JavaScript模块规范之AMD规范和CMD规范
2015/10/27 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
python斐波那契数列的计算方法
2018/09/27 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
pytorch masked_fill报错的解决
2020/02/18 Python
解决Jupyter Notebook开始菜单栏Anaconda下消失的问题
2020/04/13 Python
matlab 计算灰度图像的一阶矩,二阶矩,三阶矩实例
2020/04/22 Python
Python CSS选择器爬取京东网商品信息过程解析
2020/06/01 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
python re.match()用法相关示例
2021/01/27 Python
金属材料工程个人求职的自我评价
2013/12/04 职场文书
毕业生自荐信
2013/12/14 职场文书
卫校中专生的自我评价
2014/01/15 职场文书
抄作业检讨书
2014/02/17 职场文书
学校党的群众路线教育实践活动个人整改方案
2014/10/31 职场文书
先进工作者事迹材料
2014/12/23 职场文书
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
sql通过日期判断年龄函数的示例代码
2021/07/16 SQL Server