码迷,mamicode.com
首页 > 其他好文 > 详细

element-ui的el-date-picker组件(限制时间范围选择)

时间:2019-12-20 16:48:48      阅读:632      评论:0      收藏:0      [点我收藏+]

标签:else   两种   art   form   实现   结束时间   ace   不可   element   

  element-ui的el-date-picker组件有不同的type值能够实现不同的时间选择功能。能够通过pickoption限制选择的范围,但是某些时候我们需要对开始时间和结束时间进行相应的限制,

  例如:

    某个需求默认起始时间为昨日, 选择时间跨度不可超过366天,在这种情况下有两种解决办法,

    1.写两个datepicke组件,把起始时间和结束时间的pickeroptions进行相应的限制,但是这样写的话就需要写较为繁琐的逻辑。

    2.写一个datepicker组件,将type设置为daterange,这时就只用写一个pickeroptions进行时间的限制(实现方法如下)。

 <el-date-picker 
     v-model="ruleForm.date"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      value-format="yyyy-MM-dd"
       format="yyyy-MM-dd"
        :picker-options="pickerOptions1">
</el-date-picker>
//组件

//限制
pickerOptions1:{
                onPick: (obj) => {
                    this.pickerMinDate = new Date(obj.minDate).getTime();
                    console.log(obj)
                },
                disabledDate:(time)=> {
                    if (this.pickerMinDate) {
                        const day1 =  366 * 24 * 3600 * 1000
                        let maxTime = this.pickerMinDate + day1
                        let minTime = this.pickerMinDate - day1
                        return time.getTime() > maxTime || time.getTime()<minTime || time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                    }else{
                        return time.getTime() > Date.now()-1 * 24 * 3600 * 1000
                    }
                    
                }
            },

第二种方法中含有一个onpick的函数能够将第一次点击后获取的时间拿到,这时,如果需求中有开始时间和结束时间的联动的话,我们就能够通过这个函数进行设置。

element-ui的el-date-picker组件(限制时间范围选择)

标签:else   两种   art   form   实现   结束时间   ace   不可   element   

原文地址:https://www.cnblogs.com/longflag/p/12073807.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!