<!-- 时间范围 -->
<el-form-item label="时间范围:" required>
<el-col :span="11">
<el-form-item prop="startTime">
<el-date-picker
type="datetime"
placeholder="选择开始时间"
v-model="startTime"
style="width: 100%;"
default-time="00:00:00"
format="yyyy-MM-dd HH:mm"
:picker-options="pickerOptionsStart"
></el-date-picker>
</el-form-item>
</el-col>
<el-col style="text-align: center;" :span="2">~</el-col>
<el-col :span="11">
<el-form-item prop="endTime">
<el-date-picker
type="datetime"
placeholder="选择结束时间"
v-model="endTime"
style="width: 100%;"
default-time="00:00:00"
format="yyyy-MM-dd HH:mm"
:picker-options="pickerOptionsEnd"
></el-date-picker>
</el-form-item>
</el-col>
</el-form-item>
在data里设置picker-options
data() {
return {
startime: "",
endTime:"",
pickerOptionsStart: {
// 开始时间小于结束时间
disabledDate: time => {
let endTime = this.endTime;
if (endTime) {
return time.getTime() > new Date(endTime).getTime();
}
}
},
pickerOptionsEnd: {
// 结束时间大于开始时间
disabledDate: time => {
let beginTime = this.startTime;
if (beginTime) {
return time.getTime() < new Date(beginTime).getTime();
}
}
},
};
}
