【已解决】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

  拿来即用

  写的不好，请各位指教🌞🌞🌞

  有问题可以进行留言，看到都会进行回复🌞🌞🌞