样式效果:
代码:
<el-form-item label="数据起始时间" prop="startTime" :rules="rules.startTime">
<el-date-picker v-model="editData.startTime" type="date" placeholder="请选择开始日期时间" class="date_picker">
</el-date-picker>
<span class="date_span">-</span>
<el-date-picker v-model="editData.endTime" type="date" placeholder="请选择结束日期时间" class="date_picker">
</el-date-picker>
</el-form-item>
rules: {
startTime: [{ validator: this.validateStartTime, trigger: 'blur' }],
}
validateStartTime(rule, value, callback) {
if (this.editData.startTime && this.editData.endTime) {
if (new Date(this.editData.startTime).getTime() > new Date(this.editData.endTime).getTime()) {
callback(new Error('结束时间应该大于开始时间'))
} else {
callback()
this.$refs.editForm.validateField('endTime')
}
} else {
callback()
}
},