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

 更新时间:2019年01月09日 10:49:32   作者:missing  
这篇文章主要介绍了element-ui 时间选择器限制范围(随动),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

需求:

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

方法:

考虑到有两种设计方式:

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

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

效果图:

代码:

<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
    }
   }
  }
 }
}

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

相关文章

  • 微信公众平台API错误代码41002的问题解决办法

    微信公众平台API错误代码41002的问题解决办法

    今天在研究微信公众号接口问题,下面这篇文章主要给大家介绍了关于微信公众平台API错误代码41002问题的解决办法,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • SWFObject Flash js调用类

    SWFObject Flash js调用类

    一直想为 SWFObject 这个JS的类库写一个推荐帖,因为他轻便,同时功能强大,为我们的开发带来了很大的便捷。
    2008-07-07
  • javascript计算渐变颜色的实例

    javascript计算渐变颜色的实例

    这篇文章主要介绍了javascript计算渐变颜色的实例的相关资料,希望通过本文能帮助到大家,让大家理解掌握这部分内容,需要的朋友可以参考下
    2017-09-09
  • JS样式获取的封装方法实例详解

    JS样式获取的封装方法实例详解

    这篇文章主要介绍了JS样式获取的封装方法,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-09-09
  • layui table去掉右侧滑动条的实现方法

    layui table去掉右侧滑动条的实现方法

    今天小编就为大家分享一篇layui table去掉右侧滑动条的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-09-09
  • JavaScript中去掉数组中的重复值的实现方法

    JavaScript中去掉数组中的重复值的实现方法

    百度面试时问的一道题目,蛮常规的,但是当时自己的回答挺差劲的。现在总结记录下~
    2011-08-08
  • 3种js实现string的substring方法

    3种js实现string的substring方法

    这篇文章主要介绍了3种javascript实现string的substring方法,需要的朋友可以参考下
    2015-11-11
  • 使用canvas进行图像编辑的实例

    使用canvas进行图像编辑的实例

    下面小编就为大家带来一篇使用canvas进行图像编辑的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 简单谈谈JavaScript寄生式组合继承

    简单谈谈JavaScript寄生式组合继承

    寄生组合式继承,是集寄生式继承和组合继承的有点与一身,主要是通过借用构造函数来继承属性,通过原型链的混成形式来继承方法,这篇文章主要给大家介绍了关于JavaScript寄生式组合继承的相关资料,需要的朋友可以参考下
    2021-08-08
  • JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    JS数组排序技巧汇总(冒泡、sort、快速、希尔等排序)

    这篇文章主要介绍了JS数组排序技巧,实例汇总了JavaScript冒泡排序、sort排序、快速排序、希尔排序等,并附带分析了sort排序的相关注意事项,需要的朋友可以参考下
    2015-11-11

最新评论