1. 程式人生 > >【ElementUI】時間選擇器限制選擇範圍 disabledData

【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);//注意是||不是&&
         }
     }
   };
}