【ElementUI】時間選擇器限制選擇範圍 disabledData
阿新 • • 發佈:2019-01-06
關於結束時間不能大於開始時間的問題,在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);//注意是||不是&&
}
}
};
}