
正文
iView之DatePicker的datetimerange校验
提示:扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
使用DatePicker的type是datetimerange时,处理开始--结束的持续时间校验如下。
遇到的问题:
时间弹出校验提示,但是程序还是会继续往下走,所以调完校验后,再做判断开始时间是否为true,再调接口。
view:
<Col span="8">
<FormItem label="时间段:" prop="dates">
<DatePicker type="datetimerange" placeholder="Select date" v-model="formValidate.dates"
style="width: 100%" @on-change="changeTime">
</DatePicker>
</FormItem>
</Col>
<Col span="8">
<FormItem class="inline-submit">
<Button type="primary" @click="queryClick">查询</Button>
</FormItem>
</Col>
js:
*****data:
formValidate: {
name: '',
dates: []
}, ruleValidate: { //表单校验
name: [
{required: true, message: 'The name cannot be empty', trigger: 'blur'}
],
dates: [{
required: true,
type: 'array',
message: "Please select the date",
trigger: 'blur',
fields: {
0: {type: "date", required: true, message: "Please select the date"},
1: {type: "date", required: true, message: "Please select the date"}
}
}]
}, *******methods:
handleSubmit(name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
});
}, queryClick() {
this.handleSubmit('formValidate1');
if (this.startDate) {
this.stationRequest(); //调接口
}
},
// 时间触发
changeTime(val) {
this.startDate = val[0];
this.endDate = val[1];
}








