ElementUI DatePicker 日期选择器控制选择时间范围
选择今天以及今天之后的日期
<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 ); //可以选择同一天 } } },