
html
<template>
<el-form ref="form" :model="formData" label-width="80px">
<el-form-item label="开始日期" prop="start_time">
<el-date-picker v-model="formData.start_time" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsStart" placeholder="选择日期"> </el-date-picker>
</el-form-item>
<el-form-item label="结束日期" prop="end_time">
<el-date-picker v-model="formData.end_time" type="date" value-format="yyyy-MM-dd" :picker-options="pickerOptionsEnd" placeholder="选择日期"> </el-date-picker>
</el-form-item>
</el-form>
</template>
js
<script>
export default {
data() {
return {
formData: {
start_time: "",
end_time: ""
},
pickerOptionsStart: {
disabledDate: (time) => {
let endDateVal = this.formData.end_time;
if (endDateVal) {
return time.getTime() >= new Date(endDateVal).getTime();
}
}
},
pickerOptionsEnd: {
disabledDate: (time) => {
let beginDateVal = this.formData.start_time;
if (beginDateVal) {
return time.getTime() <= new Date(beginDateVal).getTime() - 8.64e7;
}
}
}
};
}
};
</script>
<el-form-item label="开始时间" prop="plan_start_time">
<el-date-picker
v-model="drawerData.plan_start_time"
style="width: 86%"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
size="mini"
@change="resetEnd_time"
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="plan_end_time">
<el-date-picker
v-model="drawerData.plan_end_time"
:picker-options="pickerOption()"
style="width: 86%"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetime"
size="mini"
>
</el-date-picker>
</el-form-item>
pickerOption() {
if (this.drawerData.plan_start_time != undefined) {
let date = new Date(this.drawerData.plan_start_time);
let minutes = date.getMinutes() + 1;
let h = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
let m = minutes < 10 ? "0" + minutes : minutes;
let pickerDate = date.toDateString() === new Date(this.drawerData.plan_start_time).toDateString();
return {
disabledDate: (time) => {
let old = this.drawerData.plan_start_time;
return time.getTime() < new Date(old).getTime() - 8.64e7;
},
selectableRange: pickerDate ? h + m + ":00 - 23:59:59" : "00:00:00 - 23:59:59",
};
}
},