ElementUI时间选择器限制选择范围disabledData的使用

 更新时间:2022年06月26日 16:12:13   作者:小花花inhere  
本文主要介绍了ElementUI时间选择器限制选择范围disabledData的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

关于结束时间不能大于开始时间的问题,在elementui里我们用官方提供的 disabledDate 选项来解决。
HTML:给选择器加上:picker-options属性

//开始时间
<el-date-picker v-model="startDate"></el-date-picker>
//截止时间
<el-date-picker v-model="endDate" :picker-options="endDateOpt"></el-date-picker>

DATA:

我这里就简略写下关键的。

data() {
    return {
        startDate: null,
        endDate: null,
        endDateOpt: {
            disabledData: (time) => {
                return time.getTime() < this.startDate;
            }
        }
    }
}

以上是单个选择框的,如果是daterange或datetimerange的话:

<el-date-picker v-model="value1" type="daterange" 
    :picker-options="pickerOptions">
</el-date-picker>
data() {
   return {
     value: '',
     pickerOptions2: {
         disabledDate: (time) => {
             return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
         }
     }
   };
}

PS:element 时间选择器,disabledDate同时限制多个条件

<el-date-picker
        v-model="listQuery.allDate"
        type="daterange"
        range-separator="-"
        unlink-panels
        value-format="yyyy-MM-dd"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        class="data_piccker"
        style="width:240px"
        :picker-options="pickerOptions"
      ></el-date-picker>
pickerOptions: {
        onPick: ({ maxDate, minDate }) => {
          this.pickerMinDate = minDate.getTime()
          if (maxDate) {
            this.pickerMinDate = ''
          }
        },
        disabledDate: (time) => {
           const year = 365 * 24 * 3600 * 1000
           //一年前的时间戳
           let lastyear = this.pickerMinDate - year 
          //已经选择一个日期则……
          if (this.pickerMinDate !== '') {
            const day31 = 31 * 24 * 3600 * 1000
            //选中的日期前推31天,的时间戳
            let datarangeb = this.pickerMinDate - day31
            //选中的日期后推31天
            let datarangea = this.pickerMinDate + day31
            //如果后推的日期早于今天,则设置为今日
            if (datarangea > new Date()) {
              datarangea = new Date()
            }
            //使用或||可以同时限制多个条件
            return time.getTime() < datarangeb || time.getTime() > datarangea 
          }
          //未选择日期,默认状态当天之前不可选,一年之前不可取
          return time.getTime() > Date.now()  || time.getTime() < lastyear 
        },     
   },

到此这篇关于ElementUI时间选择器限制选择范围disabledData的使用的文章就介绍到这了,更多相关ElementU disabledData内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 解决Vue中使用keepAlive不缓存问题

    解决Vue中使用keepAlive不缓存问题

    这篇文章主要介绍了Vue中使用keepAlive不缓存问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-08-08
  • 如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目

    如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目

    这篇文章主要介绍了如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • vue移动端城市三级联动组件使用详解

    vue移动端城市三级联动组件使用详解

    这篇文章主要为大家详细介绍了vue移动端城市三级联动组件的使用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • 解决vue项目打包后提示图片文件路径错误的问题

    解决vue项目打包后提示图片文件路径错误的问题

    这篇文章主要介绍了解决vue项目打包后提示图片文件路径错误的问题,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-07-07
  • 详解vue中axios请求的封装

    详解vue中axios请求的封装

    这篇文章主要介绍了vue中axios请求的封装,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • vuex实现购物车的增加减少移除

    vuex实现购物车的增加减少移除

    这篇文章主要为大家详细介绍了vuex实现购物车的增加减少移除,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-06-06
  • vue axios基于常见业务场景的二次封装的实现

    vue axios基于常见业务场景的二次封装的实现

    这篇文章主要介绍了vue axios基于常见业务场景的二次封装的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • vue组件 keep-alive 和 transition 使用详解

    vue组件 keep-alive 和 transition 使用详解

    这篇文章主要介绍了vue组件 keep-alive 和 transition 使用详解,需要的朋友可以参考下
    2019-10-10
  • vue实现el-select的change事件过程

    vue实现el-select的change事件过程

    这篇文章主要介绍了vue实现el-select的change事件过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Webpack和Vite的区别小结

    Webpack和Vite的区别小结

    本文主要介绍了Webpack和Vite的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05

最新评论