一、前言
本文主要讲解基于element-ui datetimepicker实现日期时间，在表单校验中的校验逻辑及实现方法。
注：在表单检验时间组件时，应在检验中增加type: 'date'，否则会提示检验对象错误问题。
二、Demo
vue部分
<!--开始/结束日期,时间-->
<template>
<el-row style="margin-top: 13px;">
<el-col :span="12">
<!--开始日期,时间-->
<el-form-item label="开始日期,时间" prop="start">
<el-date-picker
ref="start"
v-model="eventFormModel.start"
type="datetime"
placeholder="请选择日期时间"
align="right"
:picker-options="pickerOptions1">
</el-date-picker>
</el-form-item>
</el-col>
<el-col :span="12">
<!--结束日期,时间-->
<el-form-item label="结束日期,时间" prop="end">
<el-date-picker
ref="end"
v-model="eventFormModel.end"
type="datetime"
placeholder="请选择日期时间"
align="right"
:picker-options="pickerOptions2">
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</template>
js部分
import Validator from '@/utils/validate.js'
data() {
return {
// 开始时间
pickerOptions1: {
shortcuts: [
{
text: '今天',
onClick (picker) {
picker.$emit('pick', new Date())
}
},
{
text: '明天',
onClick (picker) {
const date = new Date()
date.setTime(date.getTime() + 3600 * 1000 * 24)
picker.$emit('pick', date)
}
},
{
text: '后天',
onClick (picker) {
const date = new Date()
date.setTime(date.getTime() + 3600 * 1000 * 24 * 2)
picker.$emit('pick',
{
text: '一周后',
onClick (picker) {
const date = new Date()
date.setTime(date.getTime() + 3600 * 1000 * 24 * 7)
picker.$emit('pick', date)
}
}]
},
// 结束时间
pickerOptions2: {
shortcuts: [
{
text: '今天',
start: [
{ type: 'date', required: true, message: '请选择开始日期、时间', trigger: 'blur' },
{validator: Validator.validateStartDate(this, 'end', 'eventFormModel'), trigger: 'blur,change'}
],
end: [
{ type: 'date', message: '请选择结束日期、时间',
{validator: Validator.validateEndDate(this, 'start', 'eventFormModel', this.$t('flowMonitor.message.limitDate')),change'}
]
}
}
校验逻辑validate.js
/*
* 日期前一个输入框校验
*/
validateStartDate (currentPage, otherDateName, formName) {
return (rule, value, callback) => {
if (currentPage.$refs[otherDateName] !== undefined && currentPage.$refs[otherDateName].value !== '' && currentPage.$refs[otherDateName].value !== undefined) {
if (value === '' || value === undefined) {
// 有结束时间
currentPage.validateFlag = !currentPage.validateFlag
if (!currentPage.validateFlag) {
currentPage.$refs[formName].validateField(otherDateName)
}
callback()
} else {
currentPage.$refs[formName].validateField(otherDateName)
callback()
}
} else {
if (value !== '' && value !== undefined) {
currentPage.$refs[formName].validateField(otherDateName)
} else {
currentPage.validateFlag = !currentPage.validateFlag
if (!currentPage.validateFlag) {
currentPage.$refs[formName].validateField(otherDateName)
}
}
// 开始时间和结束时间都没有输入
callback()
}
}
},
/*
* 时间第二个输入框校验
*/
validateEndDate (currentPage, formName, errorMsg) {
return (rule, callback) => {
if (currentPage.$refs[otherDateName] !== undefined && currentPage.$refs[otherDateName].value !== '' && currentPage.$refs[otherDateName].value !== undefined) {
if (value === '' || value === undefined) {
// 有结束时间
callback()
} else {
if (currentPage.$refs[otherDateName].value > value) {
callback(new Error(errorMsg))
}
callback()
}
} else {
currentPage.validateFlag = !currentPage.validateFlag
if (!currentPage.validateFlag) {
currentPage.$refs[formName].validateField(otherDateName)
}
// 开始时间和结束时间都没有输入
callback()
}
}
},
