【已解决】iview—两个DatePicker日期组件比较大小的校验,以及会出现加载icon
问题:
在使用iview 的日期选择组件(DatePicker)时,两个时间作比较时DatePicker会出现加载的icon图标,无法进行校验
具体如图所示:
解决方式:
相关代码:
<FormItem label="安全时段(该时段只做记录,不做提醒)">
<Row>
<Col span="11">
<FormItem prop="securityTimeStart">
<DatePicker
@on-change="dateChange1"
v-model="formData.securityTimeStart"
ref="timeForm1"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择安全时段"
style="width: 100%" />
</FormItem>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<FormItem prop="securityTimeEnd">
<DatePicker
@on-change="dateChange2"
v-model="formData.securityTimeEnd"
ref="timeForm2"
type="datetime"
format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择安全时段"
style="width: 100%" />
</FormItem>
</Col>
</Row>
</FormItem>
先设置rules:
securityTimeStart: [
{trigger: 'change', message: '开始时间不得大于或等于结束时间',validator: securityTimeStart, type: "date"}
],
securityTimeEnd: [
{trigger: 'change',message: '结束时间不得小于或等于开始时间',validator: securityTimeEnd,type: "date"}
]
然后配置校验规则:
const securityTimeStart = (rule, value, callback) =>{
if(value) {
if(!this.formData.securityTimeEnd) {
callback()
} else {
if(new Date(value).getTime() >= new Date(this.formData.securityTimeEnd).getTime()) {
callback(new Error());
} else {
callback()
}
}
} else {
callback()
}
};
const securityTimeEnd = (rule, value, callback) =>{
if(value) {
if(!this.formData.securityTimeStart) {
callback()
} else {
if(new Date(value).getTime() <= new Date(this.formData.securityTimeStart).getTime()) {
callback(new Error());
} else {
callback()
}
}
} else {
callback()
}
};
相关方法:
dateChange1(val) {
this.formData.securityTimeStart = val
},
dateChange2(val) {
this.formData.securityTimeEnd = val
}
(PS:从日期选择组件中拿时间时我使用on-change时间格式化校验了值再进行的校验比对)
这样就可以校验两个DatePicker日期组件的大小,以及会出现加载icon
拿来即用
写的不好,请各位指教🌞🌞🌞
有问题可以进行留言,看到都会进行回复🌞🌞🌞