<el-form-item prop="timeDate" label="时间">
<el-date-picker
v-model="form.timeDate"
@input="daterangeChange"
value-format="yyyy-MM-dd HH:mm:ss"
type="datetimerange"
range-separator="-"
start-placeholder="开始时间"
end-placeholder="结束时间"
/>
</el-form-item>
一、使用@input保证form表单数据更新
daterangeChange(e){
let _this = this
_this.$nextTick(() => {
_this.$forceUpdate()
})
},
二、在validator中编写自定义校验规则时不使用value,而使用v-model双向数据绑定的值进行判断
timeDate: [
{
required: true,
trigger: "blur",
validator: (rule, value, callback) => {
// 注意这里"value"的值不会及时改变,需要用到双向绑定的值,即"formData.timeDate"
if (
!this.form.timeDate ||
this.form.timeDate.length === 0 ||
this.form.timeDate[0] === "" ||
this.form.timeDate[1] === ""
) {
callback(new Error("请选择时间"));
} else if (
new Date(this.form.timeDate[0]) <= new Date().getTime() + 60 * 10 * 1000 ||
new Date(this.form.timeDate[0]) >=
new Date().getTime() + 60 * 60 * 24 * 30 * 6 * 1000
) {
callback(
new Error(
"开始时间需要在当前时间的10分钟后且不能在6个月后"
)
);
} else if (
new Date(this.form.timeDate[1]) - new Date(this.form.timeDate[0]) < 60 * 30 * 1000 ||
new Date(this.form.timeDate[1]) - new Date(this.form.timeDate[0]) > 60 * 60 * 24 * 1000
) {
callback(
new Error(
"开始时间和结束时间间隔不得短于30分钟,不得超过24小时"
)
);
} else {
callback();
}