vue element-ui DateTimePicker日期时间选择器之开始时间小于结束时间的设置
Html:
<el-form-item required label="开始时间">
<el-date-picker
type="datetime"
placeholder="开始日期"
:picker-options="startTime"
value-format='yyyy-MM-dd HH:mm:ss'
default-time="00:00:00"
v-model="swiperAddForm.startTime"
></el-date-picker>
</el-form-item>
<el-form-item required label="结束时间">
<el-date-picker
type="datetime"
placeholder="结束日期"
:picker-options="endTime"
value-format='yyyy-MM-dd HH:mm:ss'
default-time="23:59:59"
v-model="swiperAddForm.endTime"
></el-date-picker>
</el-form-item>
js:
data() {
return {
swiperAddForm: {
startTime: "",
endTime: ""
},
startTime: {
disabledDate: time => {
if (this.swiperAddForm.endTime) {
// 设置开始时间大于结束时间
return time.getTime() > new Date(this.swiperAddForm.endTime).getTime() || time.getTime() < Date.now()
} else {
// 设置开始时间小于当前时间
return time.getTime() < Date.now()
}
}
},
// 结束时间大于开始时间
endTime: {
disabledDate: time => {
if (this.swiperAddForm.startTime) {
return time.getTime() < new Date(this.swiperAddForm.startTime).getTime() + 86400000
} else {
return time.getTime() < Date.now()
}
}
}
}
}