1、定义templete
<el-form-item :label="$t('execution.StartingTime')" prop="startDateTime">
<el-date-picker
v-model="startDateTime"
type="datetime"
placeholder="年/月/日 时:分:秒"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item :label="$t('execution.EndTime')" prop="endDateTime">
<el-date-picker
v-model="endDateTime"
type="datetime"
placeholder="年/月/日 时:分:秒"
value-format="yyyy-MM-dd HH:mm:ss"
format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
2、定义校验规则
rules() {
const rules = {
startDateTime: [
{ required: true, message: this.$t('clues.startDateTime'), trigger: 'change'},
],
endDateTime: [
{ required: true, message: this.$t('clues.endDateTime'), trigger: 'change'},
{ validator: this.checkEndTime, trigger: 'change' }
]
};
return rules
}
3、定义checkEndTime方法
//校验结束时间
checkEndTime(rule, value, callback) {
if (!value) {
callback(new Error("请选择结束时间"));
} else {
if (!this.startDateTime) {
callback(new Error("请选择开始时间!"))
} else if (Date.parse(this.startDateTime) >= Date.parse(value)) {
callback(new Error("结束时间必须大于开始时间!"))
} else {
callback();
}
}
}