关于Element-Ui 时间范围选择器DatePicker禁用范围日期问题

简介: 饿了么组件库的[DatePicker](https://element.eleme.cn/#/zh-CN/component/date-picker) 日期范围选择,

首先说明,本人是个很菜的人。

饿了么组件库的DatePicker 日期范围选择,如何禁用xxx~xxx日期,只提供部分时间段选择呢。

我使用的是这种时间范围选择组件

 <el-date-picker
      v-model="value1"
      type="daterange"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期">
      //这边定义下picker-options
      :picker-options="pickerOptions"
  </el-date-picker>

关于禁用两个时间段的问题,官网提供了一个APIPicker Options我们就在Vue的计算方法 computed 里面写,当然了,在data里也可以吗,通过打印disableDate里面的time发现返回的都是一堆的日期,而官方文档说明返回结果为Boolean

//用法    pickerOptions (){
   
      const _this = this;
      return {
   
        disabledDate(time) {
   
            return time.getTime() > Date.now() - 8.64e6;
        }
      }
    }

这样写,就能限制用户只能在有个需求,是禁用指定的开始日期,和指定的结束日期,咋办呢。一开始我是不理解的,毕竟pickerOptions方法只会返回一个布尔值,如何达到禁用两个日期的效果呢。这里还是非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常非常感谢我的好友 技术部一哥 小文哥为我讲解了一些概念。


picker-options属性是接收一个对象,所以 disabledDate 禁用需要禁用的日期时,只要在disabledDate的参数中将需要禁用的时间return返回,该时间就会被禁用。这个时候,我们把禁用的日期设置为true return出去。就可以啦。

代码:

    pickerOptions (){
   
      const _this = this;
      return {
   
        disabledDate(time) {
   
          const licenseStart = new 
          //_this.ViewMode[2].StartEnableDate 是我的指定日期。
          Date(_this.ViewMode[2].StartEnableDate);
          const licenseEnd = new Date();
          const now = new Date(time);//这个代表今天日期
          // licenseStart.setDate(licenseStart.getDate());
          return ! ( now >= licenseStart && now <= licenseEnd);
          // return time.getTime() < licenseStart.getTime();
        }
      }
    }

这样就大功告成了。

相关文章
element-ui中Select 选择器异步加载下一页
element-ui中Select 选择器异步加载下一页
|
4月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
635 3
|
4月前
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
208 3
|
4月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
149 1
|
4月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
431 0
|
4月前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
497 0
element-ui时间选择器限制只能点击不让输入(整理)
element-ui时间选择器限制只能点击不让输入(整理)
|
6月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui中Select 选择器value-key的使用
element-ui中Select 选择器value-key的使用
|
JavaScript
Vue框架Element UI教程-时间选择器(二)
Vue框架Element UI教程-时间选择器(二)
66 0

热门文章

最新文章

下一篇
无影云桌面