Error in event handler for “el.form.change“: “TypeError: dateObject.getTime is not a function“

～Serendipity～

于 2021-09-03 14:32:15 发布

阅读量2.2k

点赞数 5

文章标签： vue.js javascript html

本文链接：https://blog.csdn.net/ZMJ_QQ/article/details/120080810

版权

本文详细介绍了在Vue.js中遇到的时间选择器（el-date-picker）与表单验证规则不匹配的问题，导致的报错情况。错误源于时间选择器的value-format设置为字符串类型，而验证规则期望的是日期类型。解决方法包括将验证规则的type改为'string'，以及调整时间选择器的值类型。通过这个案例，开发者可以了解到如何正确地同步表单验证规则和组件的值类型，确保前端表单验证的顺利进行。

摘要由CSDN通过智能技术生成

报错

源代码

<el-form-item prop="join_data">
  <el-date-picker 
     v-model="member.join_data"
     placeholder="加入时间"
     clearable
     format="yyyy 年 MM 月 dd 日"
     value-format="yyyy-MM-dd" >
  </el-date-picker>
</el-form-item>


memberRules: {
  join_data: [
   { type: 'date', required: true, message: '请选择加入日期', trigger: 'change' }
  ],
},

报错原因

时间选择器的value-format="yyyy-MM-dd"，是一个string类型，而表单验证的规则是date，只要将验证规则的type与时间选择器值得类型改为一致。

解决办法