zoukankan      html  css  js  c++  java
  • 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=" 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];
    }
  • 相关阅读:
    L255 Learning to say no brings a thrill of freedom
    2019-02-25 EST 科技文翻译
    L253 Work and Pleasure
    2019.2.22 初级英语口语班 结课
    L252 小组作业
    2019-02-22 L231
    leetcode 67 Add Binary ----- java
    leetcode 66 Plus One ----- java
    leetcode 65 Valid Number ----- java
    leetcode 64 Minimum Path Sum ----- java
  • 原文地址:https://www.cnblogs.com/phpli/p/10732092.html
Copyright © 2011-2022 走看看