1.页面代码
<el-form ref="form" :model="form" :rules="rules" label-width="140px">
<el-col :span="12">
<el-form-item prop="meetingTimeQ" label="会议时间起">
<el-date-picker
v-model="form.meetingTimeQ"
type="datetime"
style="width: 100%"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择会议开始时间"
/> </el-form-item></el-col>
<el-col :span="12">
<el-form-item prop="meetingTimeZ" label="会议时间止">
<el-date-picker
v-model="form.meetingTimeZ"
type="datetime"
style="width: 100%"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="选择会议结束时间"
/>
</el-form-item>
</el-col>
</el-form>
2.js部分代码
export default {
data() {
// 验证时间
var validateTimeQ = (rule, value, callback) => {
if (value === '') {
callback(new Error('请输入开始日期!'));
} else {
if (this.form.meetingTimeQ !== '') {
this.$refs.form.validateField('meetingTimeZ');
}
callback();
}
};
var validateTimeZ = (rule, value, callback) => {
if (value === '') {
callback(new Error('请再次输入结束日期'));
} else if (value <= this.form.meetingTimeQ) {
callback(new Error('会议起始日期不能小于结束日期'));
} else {
callback();
}
};
return {
form: {
},
rules: {
meetingTimeQ: [{ validator: validateTimeQ, trigger: 'blur' }],
meetingTimeZ: [{ validator: validateTimeZ, trigger: 'blur' }],
},
}