关于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 选择器异步加载下一页
|
14天前
|
存储
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
本篇将带你实现一个颜色选择器应用。用户可以从预设颜色中选择,或者通过输入颜色代码自定义颜色来动态更改界面背景。该应用展示了如何结合用户输入、状态管理和界面动态更新的功能。
31 3
「Mac畅玩鸿蒙与硬件34」UI互动应用篇11 - 颜色选择器
|
20天前
|
UED
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
本篇将带你实现一个滑动选择器应用,用户可以通过滑动条选择不同的数值,并实时查看选定的值和提示。这是一个学习如何使用 Slider 组件、状态管理和动态文本更新的良好实践。
33 1
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
|
5月前
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
Element UI【级联选择器】el-cascader 获取选中内容的 label 数据,鼠标悬浮显示超长内容
729 3
|
5月前
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
Element UI 日期选择器el-date-picker禁止选择指定日期(禁止选择过去,禁止选择未来)【含是否包含今天】
258 3
|
5月前
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
Element UI【组件拓展】el-datetime-picker-before 禁止选择未来时间的日期时间选择器(精确到时分秒)
173 1
|
5月前
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
Element UI 自定义/修改下拉弹窗的样式(如级联选择器的下拉弹窗样式)
500 0
|
5月前
|
定位技术 API 数据格式
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
Element UI【详解】el-cascader 级联选择器 - 行政区划选择(可以选择任意一级),限定选择范围,获取并解析选中的节点
640 0
element-ui时间选择器限制只能点击不让输入(整理)
element-ui时间选择器限制只能点击不让输入(整理)
|
7月前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容