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 對象