最简版本 只限制了结束时间不能在开始时间前 后续有使用到在详细完善功能
<el-row :gutter="20">
<el-col :span="5">
<el-form-item label="预计进企时间" prop="gmtInto" :rules="rules.gmtInto">
<el-date-picker size="small" :picker-options="pickerOptionsStart" v-model="formData.gmtInto" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="5">
<el-form-item label="预计离企时间" prop="gmtLeave" :rules="rules.gmtLeave">
<el-date-picker size="small" :picker-options="pickerOptionsEnd" v-model="formData.gmtLeave" type="datetime" value-format="yyyy-MM-dd HH:mm" placeholder="选择日期时间">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
data() {
return {
formData:{},
pickerOptionsStart: {
disabledDate: (time) => {
if (this.formData.gmtLeave) {
return (
time.getTime() > new Date(this.formData.gmtLeave).getTime()
);
}
}
},
pickerOptionsEnd: {
disabledDate: (time) => {
if (this.formData.gmtInto) {
return (
time.getTime() < new Date(this.formData.gmtInto).getTime()
);
}
}
},
}
},