iview日期控件,已选选点日期，但是通不过validate验证

<DatePicker  v-model="baseForm.purchaseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>

 

重点在于验证那块验证需要添加的一点代码

purchaseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}],

添加蓝色部分代码即可完美通过验证。

 

**************************************************************************************************************

在使用iview的时间日期选择组件时，需要进行非空验证，但是当选择好日期时间后，还是提示不能为空，后来查阅资料通过如下方法解决了；

1.在验证规则内添加   pattern: /.+/ 

ruleValidate: {
                startTime: [{ required: false, message: '起始时间不能为空', trigger: 'blur',pattern: /.+/ }],
                endTime: [{ required: false, message: '截止时间不能为空', trigger: 'blur',pattern: /.+/ }]
            },
2.将 trigger: 'blur' 改为 trigger: 'change'

ruleValidate: {
 
                startTime: [{ required: false, message: '起始时间不能为空', trigger: 'change',pattern: /.+/ }],
                endTime: [{ required: false, message: '截止时间不能为空', trigger: 'change',pattern: /.+/ }]
            },
 

原文链接：https://blog.csdn.net/qq_41725450/article/details/94669515

******************************************************************************************************************************

********************************************************************************************************************************

根据日期控件的type类型，分别进行校验

1. type="datetime"的验证方式：

<DatePicker  v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/>
chooseDate: [{required: true, message: '日期不能为空!', trigger: 'blur', pattern: /.+/}],
后面添加 pattern: /.+/可验证；

2. type="daterange"的验证方式：

<FormItem label="变更起止时间：" prop="modifyTimes">
           <DatePicker
                        v-model="form.modifyTimes"
                        format="yyyy-MM-dd"
                        type="daterange"
                        placement="bottom-end"
                        placeholder="请选择起止时间"
                        class="am-datepicker"
                        @on-change="getModifyTimes">
            </DatePicker>
</FormItem>
modifyTimes: [{
    type: 'array',
    required: true,
    fields: {
        0: {type: 'date', required: true, message: '请选择起止日期'},
        1: {type: 'date', required: true, message: '请选择起止日期'}
    }
}],
 
原文链接：https://blog.csdn.net/weixin_41849462/article/details/86630305

*********************************************************************************************************************************

iView + Vue ，DatePicker选择日期后格式变成UTC处理，注意两点不用自己转格式

 

问题：DatePicker组件，选择日期后格式变成UTC，例如：选择的日期是2019-03-10，得到的结果却是2019-03-10T16:00:00.000Z，页面显示是Sat Mar 09 2019 00:00:00 GMT+0800 (中国标准时间)
解决：用on-change事件的返回值，给绑定的数据赋值。查文档可知道on-change的返回值是已经格式化后的日期，是我们想要的格式，在<template>中$event是on-change的返回值，直接用简易写法（1）selDate=$event就可以赋值，第二点（2）将v-model="selDate"改为:value="selDate" 来绑定值，这样得到的是格式化后的，如果使用v-model，如果用watch监视selDate，会进两次第一次过来还是UTC格式，第二次是转好格式的。将v-model改为:value时，只会进一次，并且是转好格式的，再次强调。

 

<template>
   <div>
       <DatePicker ref="dateRef"
                   :value="selDate"
                   :placeholder="选择日期"
                   size="small"
                   :editable="false"
                   @on-change="datepicker_change_event(selDate=$event)"></DatePicker>
   </div>
</temlate>
 
<script>
export default {
  data(){
    return {
      selDate: '2019-03-10'
    }
  },
  methods:{
    datepicker_change_event() {
      console.log('正常格式日期',this.selDate);
    },
}
</script>

原文链接：https://blog.csdn.net/xueyue616/article/details/100880702