问题与答案都存在于场景、情景、背景之中。

 

问题背景：

chrom浏览器，vue+element-ui项目，前端以表格形式显示员工信息，包括出生日期等。可编辑员工信息，包括出生日期等。出生日期使用了el-date-picker。

 

问题描述：

在编辑员工信息，编辑出生日期时，点击出现日期选择框，但是选择日期时，无反应，F12发现有错误：

TypeError: date.getHours is not a function

...

 

问题分析：

el-date-picker相关代码：

            <el-col :span="6">
              <div>
                <el-form-item label="出生日期:" prop="birthday">
                  <el-date-picker
                    v-model="emp.birthday"
                    size="mini"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    style="width: 150px"
                    type="date"
                    placeholder="出生日期">
                  </el-date-picker>
                </el-form-item>
              </div>
            </el-col>

页面编辑信息显示如下图：

 

经过观察，可以发现，页面上选择的只有日期，但是代码中却有 HH:mm:ss：

value-format="yyyy-MM-dd HH:mm:ss"

而且代码中

type="date"

date.getHours is not a function应该与此有关

 

解决方案：

删除HH:mm:ss

经验证，可以正常的选择日期了。

 

在组件|Element（element官网）中：

有这些组件的详细用法。