DatePicker日期格式化后，报错TypeError dateObject.getTime is not a function_datetimepicker datepicker is not a function

DatePicker日期格式化后，报错TypeError dateObject.getTime is not a function.

一、问题描述

使用element-ui的DatePicker组件时，需要把日期格式化为yyyy-mm-dd格式，且日期为必填选项，需要对其进行校验。使用代码如下：

<el-form-item label="开始时间" prop="startTime">
    <el-date-picker
        type="date"
        placeholder="选择开始日期"
        v-model="ruleForm.startTime"
        format="yyyy-MM-dd"
        value-format="yyyy-MM-dd"
    ></el-date-picker>
</el-form-item>
<script>
export default {
  data() {
    return {
      ruleForm: {
        startTime: ""
      },
      rules: {
        startTime: [
          {
            type: "date",
            required: true,
            message: "请输入开始时间",
            trigger: "change"
          }
        ]
      }
    };
  }
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

运行代码时出现vue warn，vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in event handler for “el.form.change”: “TypeError: dateObject.getTime is not a function”

二、原因分析和解决方法

经实践发现由rules中的type: "date"引起的。修改方式有两种：

• 方式一 将type: "date"改为type: “string”

rules: {
    startTime: [
        {
        type: "string",
        required: true,
        message: "请输入开始时间",
        trigger: "change"
        }
    ]
}
1
2
3
4
5
6
7
8
9
10

• 方法二 将直接去除type: "date"即可。

rules: {
    startTime: [
        {
        required: true,
        message: "请输入开始时间",
        trigger: "change"
        }
    ]
}
1
2
3
4
5
6
7
8
9

原因分析：

有可能是验证时，date类型需要调用getTime函数，而指定了value-format的el-date-picker的绑定值的类型已经不再是date类型，所以会报此错。
.–参考文档.