ElementUI日期選擇器時間選擇範圍限制
阿新 • • 發佈:2018-06-01
date ron let 推出 舉例 strong 2.x ons 餓了麽
ElementUI是餓了麽推出的一套基於vue2.x的一個ui框架。官方文檔也很詳細,這裏做一個element-ui日期插件的補充,官方文檔中使用picker-options屬性來限制可選擇的日期,這裏舉例子稍做補充。
一、單個輸入框的
//組件代碼
<el-date-picker
v-model="value1"
type="date"
placeholder="選擇日期"
:picker-options="pickerOptions">
</el-date-picker>
設置選擇七天之前到今天的日期
data(){
return {
pickerOptions:{
disabledDate(time){
let _now = Date.now(),
seven = 7 * 24 * 60 * 60 * 1000,
sevenDays = _now - seven;
return time.getTime() > _now || time.getTime() < sevenDays;
//大於當前的禁止,小於7天前的禁止
}
}
}
}
這個return剛開始有點難理解,大致可以理解為time.getTime()就是裏面的每個日期都會來遍及比較一遍,比當前時間大,為true,禁止;小於7天前的時間,為true,禁止。
二、兩個輸入框
<el-date-picker
v-model="value1"
type="date"
placeholder="開始日期"
:picker-options="pickerOptions0">
</el-date-picker>
<el-date-picker
v -model="value2"
type="date"
placeholder="結束日期"
:picker-options="pickerOptions1">
</el-date-picker>
限制結束日期不能大於開始日期
data(){
return {
pickerOptions0: {
disabledDate: (time) => {
if (this.value2 != "") {
return time.getTime() > Date.now() || time.getTime() > this.value2;
} else {
return time.getTime() > Date.now();
}
}
},
pickerOptions1: {
disabledDate: (time) => {
return time.getTime() < this.value1 || time.getTime() > Date.now();
}
}
}
}
ElementUI日期選擇器時間選擇範圍限制