ElementUI DatePicker 日期選擇器控制選擇時間範圍
阿新 • • 發佈:2019-03-20
time() value hold disabled -o 24* true 時間 picker
選擇今天以及今天之後的日期
<el-date-picker v-model="value1" type="date" placeholder="選擇日期" :picker-options="pickerOptions0"> </el-date-picker> data(){ return { pickerOptions0: { disabledDate(time) { return time.getTime() < Date.now() - 8.64e7;//如果沒有後面的-8.64e7就是不可以選擇今天的 } } } }
選擇今天以及今天以前的日期
data (){ return { pickerOptions0: { disabledDate(time) { return time.getTime() > Date.now() - 8.64e6;//如果沒有後面的-8.64e6就是不可以選擇今天的 } }, } }
限制結束日期不能大於開始日期
<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() > new Date(this.value2).getTime(); } }, pickerOptions1: { disabledDate: (time) => { return time.getTime() < new Date(this.value1).getTime()- 1*24*60*60*1000;//減去一天的時間代表可以選擇同一天; } }, } }
限制選擇開始時間不能小於當前時間。並且結束時間不能大於開始時間(比上面多了層限時)
pickerOptions0: { //結束時間不能大於開始時間 disabledDate: time => { if (this.addForm.date_range_end) { return ( time.getTime() > new Date(this.addForm.date_range_end).getTime() ); } else { //還沒有選擇結束時間的時候,讓他只能選擇今天之後的時間包括今天 return time.getTime() < Date.now() - 8.64e7; } } }, pickerOptions1: { disabledDate: time => { if (this.addForm.date_range_start) { return ( time.getTime() < new Date(this.addForm.date_range_start).getTime() - 1 * 24 * 60 * 60 * 1000 ); //可以選擇同一天 } } },
ElementUI DatePicker 日期選擇器控制選擇時間範圍