element-ui的el-date-picker組件有不一樣的type值可以實現不一樣的時間選擇功能。可以經過pickoption限制選擇的範圍,可是某些時候咱們須要對開始時間和結束時間進行相應的限制,element-ui
例如:函數
某個需求默認起始時間爲昨日, 選擇時間跨度不可超過366天,在這種狀況下有兩種解決辦法,ui
1.寫兩個datepicke組件,把起始時間和結束時間的pickeroptions進行相應的限制,可是這樣寫的話就須要寫較爲繁瑣的邏輯。this
2.寫一個datepicker組件,將type設置爲daterange,這時就只用寫一個pickeroptions進行時間的限制(實現方法以下)。spa
<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的函數可以將第一次點擊後獲取的時間拿到,這時,若是需求中有開始時間和結束時間的聯動的話,咱們就可以經過這個函數進行設置。code