iview爬坑，报错“Error in event handler for "on-form-change": "TypeError: dateObject.getTime is not a fun”

╰+攻爆jí腚メ 2022-04-24 10:00 444阅读 0赞

# 使用iview自带的DatePicker 日期选择器，加入验证类型为 type="date"时报错 #

## 如图 ##

![使用iview自带的DatePicker 日期选择器，加入验证类型为 type="date"时报错][iview_DatePicker _ type_date]  
首先说明出现原因，elementUI的日期选择器【el-date-picker】在加上格式

value-format=“yyyy-MM-dd” format=“yyyy-MM-dd”

和校验规则时

\{ type: ‘date’, required: true, message: ‘请选择日期’, trigger: ‘change’ \}

会出现顶上问题，结合网络上各路大神的解决方案，实践得出，

## 开始时候的校验规则为 ##

Start: [
              {  
                required: true, 
                type:"date",
                message: "青选择开始时间", 
                trigger: "change" 
                }
            ],
            End: [{  
              required: true, 
              type:"date",
              message: "请选择结束时间", 
              trigger: "change" 
              }]

由于加入了type=“date”,导致上述的错误

## 解决 ##

### 将type改为“string"或者直接删除这一项 ###

// 原因可能是：elementUI自带的格式转换后会将绑定值转为字符串，而校验规则中的【type: ‘date’】已经不匹配，至于它的报错是因为转换为字符串，不是date对象所以没有getTime这个方法了。

（时间选择器【el-time-picker】也有同样问题）

### 字符串转为日期格式 ###

if (this.formValidate.stopGroupDay != null && this.formValidate.stopGroupDay != '') { 
         this.formValidate.stopGroupDay = new Date(this.formValidate.stopGroupDay.replace(/(\d{4})(\d{2})(\d{2})/g,'$1-$2-$3'));
    }

在修改时就把时间转换成时间格式，我的日期格式是‘20180517’格式，这样的必须先转换成日期类格式才能new data（），否则new data（）无法识别

[参考][Link 1]

[iview_DatePicker _ type_date]: /images/20220216/b19f53c66399494da269076415d78e9e.png
[Link 1]: https://blog.csdn.net/leeleejoker/article/details/80886278