关于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 选择器异步加载下一页
element-ui时间选择器限制只能点击不让输入(整理)
element-ui时间选择器限制只能点击不让输入(整理)
|
5天前
|
前端开发
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui组件DatePicker日期选择器移动端兼容
element-ui中Select 选择器value-key的使用
element-ui中Select 选择器value-key的使用
|
6月前
|
JavaScript
Vue框架Element UI教程-时间选择器(二)
Vue框架Element UI教程-时间选择器(二)
40 0
|
6月前
element ui el-date-picker 禁止选择指定日期
element ui el-date-picker 禁止选择指定日期
37 0
|
7月前
|
JavaScript
vue element-ui 菜单管理使用图标选择器组件
vue element-ui 菜单管理使用图标选择器组件
147 0
|
7月前
|
XML JSON 数据格式
SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析
SAP UI5 日期类型 sap.ui.model.type.Date 的显示格式问题分析
54 0
|
7月前
|
存储 Web App开发 开发者
SAP UI5 日期类型 sap.ui.model.type.Date 的解析格式问题分析
SAP UI5 日期类型 sap.ui.model.type.Date 的解析格式问题分析
39 0
|
9月前
|
JavaScript
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
vue element-ui (DatePicker)日期选择器获取开始时间和结束时间-均为yyyy-MM-dd 格式
191 0

热门文章

最新文章