使用Element-UI组件的DateTimePicker,如下:

<template>
<div class="block">
<span class="demonstration">时间</span>
<el-date-picker
v-model="value"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
</div>
</template> <script>
export default {
data() {
return {
value: '1554189000'
};
}
};
</script>

如果value 为时间戳或者yyyy-MM-dd hh:mm:ss格式,会报错:

TypeError: Cannot read property 'getHours' of undefined

因为date-picker 的时间是格林威时间,赋给v-model的值需要格林威时间格式,如果value 为yyyy-MM-dd hh:mm:ss,则只需要在 el-date-picker 节点上增加一个格式化value的属性 value-format="yyyy-MM-dd hh:mm:ss"

<el-date-picker
v-model="value"
type="datetime"
value-format="yyyy-MM-dd hh:mm:ss"
placeholder="选择日期时间">
</el-date-picker>

如果value 为时间戳,则只需要value = new Date(value * 1000) 转换一次即可

[Element-UI] 使用Element-UI的DateTimePicker组件报错:Cannot read property 'getHours' of undefined的更多相关文章

  1. React 导入组件前段浏览器报错 “Cannot read property 'Component' of undefined”

    问题出在这个花括号上,当你写{React}的时候,他只会导入React,并不会导入下面你要用到的Component组件, 所以,将括号去掉就可以了. 别忘记保存.

  2. 安装skype for business server组件 报错“未满足先决条件”和安装KB2982006补丁提示“此更新不适用于你的计算机”

    安装skype for business server组件 报错“未满足先决条件” 上网经查询发现是没有安装KB2982006-x64 更新补丁 去官网上找这个补丁,发现这个补丁要热更新啥的,还要写邮 ...

  3. Grunt打包GMU组件 报错处理

    莫Q群的大神推荐移动GMU组件,GMU是基于zepto的mobile UI组件库,提供webapp.pad端简单易用的UI组件,官网:http://gmu.baidu.com/具有以下特点: 简单易用 ...

  4. 【Vue.js】vue引入组件报错:该组件未注册?

    [Vue warn]: Unknown custom element: <QuestionnaireOption> - did you register the component cor ...

  5. 引用element-ui的Drawer抽屉组件报错问题

    前提:vue项目采取按需引入的方式引入element,并且使用其他组件都正常,没有发生异常 问题表现: 在vue项目中引用了Drawer 抽屉组件,结果报错 意思就是组件未注册,当时我的表情: 没办法 ...

  6. 使用Angular cli创建组件报错: Unexpected token / in JSON at position....

    之前为了熟悉流程一直都是手动创建组件,今天试着用cli创建组件,居然报错了,报错大致为: Unexpected token / in JSON at position.... ,并且错误指向了.ang ...

  7. python测试开发django-45.xadmin添加小组件报错解决

    前言 xadmin首页上有个添加小组件按钮,打开的时候会报错"render() got an unexpected keyword argument 'renderer'" 环境: ...

  8. python测试开发django-43.xadmin添加小组件报错解决

    前言 xadmin首页上有个添加小组件按钮,打开的时候会报错“render() got an unexpected keyword argument 'renderer'”环境:python3.6dj ...

  9. springcloud微服务feign组件报错

    今天在用springcloud搭建微服务时,利用feign做通讯组件,结果报错 java.lang.IllegalStateException: Failed to introspect Class ...

随机推荐

  1. Rest架构风格的实践(使用通用Mapper技术)

    1.根据用户 id 查询用户数据 1.1 controll控制器 @RequestMapping("restful/user") @Controller public class ...

  2. springboot同时使用thymeleaf和jsp模板

    语言:javaEE 框架:springboot+thymeleaf.jsp模板引擎 背景:学习springboot过程中想同时使用thymeleaf和jsp访问(官方不建议) 步骤: 1)  在pom ...

  3. C++中各种时间类型的转换(包括MFC中的时间类型)

    平时写代码会经常遇到时间类型转换的问题,如时间戳转为格式化时间,或者反过来等,时间类型有的为time_t,还有FILETIME一堆,在这里记录下他们之间是如何转换的. 时间类型及其意义 FILETIM ...

  4. 使用hibernate从一方获取多方信息时报错:org.hibernate.LazyInitializationException: failed to lazily initialize a collection of role

    引起原因:hibernate加载关联对象的方式有懒加载方式和立即加载方式. 如果在多对一的配置中没有指定加载方式,而一对多的配置中指定了懒加载方式,因此在获取一方是可获取到值,而获取多方时sessio ...

  5. Oracle 导出错误 EXP-00000~EXP-00107

    EXP-00000: Export terminated unsuccessfully Cause: Export encountered an Oracle error. Action: Look ...

  6. 第28章:MongoDB-索引--过期索引(TTL)

    ①过期索引(TTL) TTL索引是让文档的某个日期时间满足条件的时候自动删除文档,这是一种特殊的索引,这种索引不是为了提高查询速度的,TTL索引类似于缓存,缓存时间到了就过期了,就要被删除了 ②范例: ...

  7. 第08章:MongoDB-CRUD操作--文档--删除

    ①语法 remove()  [2.6以后方法过时] deleteOne() [2.6以后官方推荐] deleteMany() [2.6以后官方推荐] db.collection.remove( < ...

  8. NodeList类型

    NodeList近亲NameNodeMap.HTMLCollection是从整体上透彻理解DOM的关键所在.这三个集合都是'动态的' 换句话说,每当文档结构发生变化时,它们都会更新. 所以它们始终都会 ...

  9. Redis和RabbitMQ在项目中的使用

    一:Redis的使用 1.先引入pom.xml的依赖 <dependency> <groupId>redis.clients</groupId> <artif ...

  10. 如何使用阿里巴巴iconfont矢量图片

    ①打开此网站http://www.iconfont.cn/ , 选择需要的几个图形 → 加入购物车 → 添加至项目 → 给项目随便命名 → 点击电线连接并点击代码 → 复制代码到css ②在body里 ...