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:

 

 1 *****data:
 2 formValidate: {
 3           name: '',
 4           dates: []
 5         },
 6 
 7         ruleValidate: { //表单校验
 8           name: [
 9             {required: true, message: 'The name cannot be empty', trigger: 'blur'}
10           ],
11           dates: [{
12             required: true,
13             type: 'array',
14             message: "Please select the date",
15             trigger: 'blur',
16             fields: {
17               0: {type: "date", required: true, message: "Please select the date"},
18               1: {type: "date", required: true, message: "Please select the date"}
19             }
20           }]
21         },
22 
23 
24 *******methods:
25 handleSubmit(name) {
26         this.$refs[name].validate((valid) => {
27           if (valid) {
28             this.$Message.success('Success!');
29           } else {
30             this.$Message.error('Fail!');
31           }
32         });
33       },
34 
35 queryClick() {
36         this.handleSubmit('formValidate1');
37         if (this.startDate) {
38           this.stationRequest();  //调接口
39         }
40       },
// 时间触发
changeTime(val) {
this.startDate = val[0];
this.endDate = val[1];
}

 

上一篇:jquery-ui Datepicker 创建 销毁


下一篇:iview组件库, DatePicker日期组件,进行日期间隔控制方法