element-ui的el-date-picker組件（限制時間范圍選擇）

　　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的函數能夠將第一次點擊后獲取的時間拿到，這時，如果需求中有開始時間和結束時間的聯動的話，我們就能夠通過這個函數進行設置。

 

更多分享請微信搜索並關注公眾號“鯨落未生”