效果如图：
image.png
代码如下：
<el-form-item label="开始时间" label-width="120px">
<el-date-picker v-model="startTime" type="datetime" :picker-options="startTimeOptions" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :clearable="false" :editable="false"></el-date-picker>
</el-form-item>
<el-form-item label="结束时间" label-width="120px">
<el-date-picker v-model="endTime" type="datetime" :picker-options="endTimeOptions" value-format="yyyy-MM-dd HH:mm:ss" placeholder="选择日期时间" :clearable="false" :editable="false"></el-date-picker>
</el-form-item>
data() {
return {
startTime:'',
endTime:'',
/* start 结束时间不能大于开始时间 */
startTimeOptions: {
disabledDate: (time) => {
if (this.endTime != "") {
return time.getTime() > new Date(this.endTime).getTime() || time.getTime() < Date.now() - 8.64e7;
}else{//还没有选择结束时间的时候，让他只能选择今天之后的时间包括今天
return time.getTime() < Date.now() - 8.64e7
}
}
},
endTimeOptions: {
disabledDate: (time) => {
if (this.startTime != "") {
return time.getTime() < new Date(this.startTime).getTime();
}else{//还没有选择开始时间的时候，让他只能选择今天之后的时间包括今天
return time.getTime() < Date.now() - 8.64e7
}
}
}
/* end*/
};
