1.控制开始结束时间
<div >
<label class="el-form-item__label">开始时间:</label>
<el-date-picker type="datetime" :picker-options="pickerOptions" placeholder="选择时间" v-model="form.start"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</div>
<div >
<label class="el-form-item__label">结束时间:</label>
<el-date-picker type="datetime" default-time="23:59:59" :picker-options="pickerOptionsEnd" placeholder="选择时间" v-model="form.end"
value-format="yyyy-MM-dd HH:mm:ss"></el-date-picker>
</div>
//验证规则 大于当前时间且开始时间小于结束时间
pickerOptionsEnd: {
disabledDate:time =>{
let beginDateVal = this.form.start;
if (beginDateVal) {
return (time.getTime() + 3600 * 1000 * 24) < Date.now() || time.getTime() < new Date(beginDateVal)
.getTime();
} else {
return (time.getTime() + 3600 * 1000 * 24) < Date.now()
}
}
}, //时间选择
pickerOptions: {
disabledDate:time =>{
let endDateVal = this.form.end;
if (endDateVal) {
return (time.getTime() + 3600 * 1000 * 24) < Date.now() || time.getTime() > new Date(endDateVal).getTime();
} else {
return (time.getTime() + 3600 * 1000 * 24) < Date.now()
}
}
},
2.DateTimePicker 默认时间为00:00:00 可以设置通过设置default-time值来更改默认时间
3.value-format可选,绑定值的格式。不指定则绑定值为 Date 对象