ELementUI 日期组件datetime-picker开始时间与结束时间比较
<template>
<el-form :model="formData" ref="Form">
<el-row>
<el-form-item
class="row-two"
label="开始时间:"
prop="StartDate"
:rules="[validateDateComputed('StartDate', 'EndDate')]"
>
<el-date-picker
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="formData.StartDate">
</el-date-picker>
</el-form-item>
<el-form-item
class="row-two"
label="结束时间:"
prop="EndDate"
:rules="[validateDateComputed('StartDate', 'EndDate')]"
>
<el-date-picker
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
value-format="yyyy-MM-dd HH:mm:ss"
v-model="formData.EndDate">
</el-date-picker>
</el-form-item>
</el-row>
</el-form>
</template>
export default {
computed: {
validateDateComputed () {
return (start, end) => {
return {
validator: (rule, value, callback) => {
if (this.formData[start] && this.formData[end]) {
if (new Date(this.formData[end]).getTime() < new Date(this.formData[start]).getTime()) {
callback(new Error('请选择正确的时间!'));
} else {
const formRef = this.$refs.Form;
if (formRef) {
formRef.clearValidate(start);
formRef.clearValidate(end);
}
callback();
}
} else {
callback();
}
},
trigger: ['blur']
};
};
}
}
};