vue+elementUI 關於日期選擇器的disabledDate問題
阿新 • • 發佈:2019-01-09
關於結束時間不能大於開始時間的問題,在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>
- 1
- 2
- 3
- 4
DATA:
我這裡就簡略寫下關鍵的。
data() {
return {
startDate : null,
endDate: null,
endDateOpt: {
disabledData: (time) => {
return time.getTime() < this.startDate;
}
}
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
以上是單個選擇框的,如果是daterange或datetimerange的話:
<el-date-picker v-model="value1" type="daterange"
:picker-options ="pickerOptions">
</el-date-picker>
- 1
- 2
- 3
data() {
return {
value: '',
pickerOptions2: {
disabledDate: (time) => {
return time.getTime() > new Date(2017, 11, 30) || time.getTime() < new Date(2017, 11, 11);//注意是||不是&&
}
}
};
}
問題: (html5)element UI 的datePicker 怎麼限制輸入的範圍呢?描述:
1.element UI的datePicker 怎麼確定日期的選擇範圍內,向後臺的資料需要限制在某一段日期範圍內,在element Ui 的日期範圍內
解決方案1:pickerOptions0: {
disabledDate(time) {
return time.getTime() < Date.now() - 8.64e7;
}
},
disabledDate: (time) => {
let beginDateVal = this.addJobForm.beginDate;
if (beginDateVal) {
return time.getTime() < beginDateVal;
}
}
解決方案2:http://element.eleme.io/#/zh-...
http://jsfiddle.net/api/post/...
設定picker-options的disabledDate,返回true被禁用。
涉及到具體的專案,這種問題最好到GitHub上去問。