vue+element下日期组件momentjs转换赋值问题解决
更新时间：2024年02月27日 10:00:39 作者：杀猪刀-墨林
这篇文章主要介绍了vue+element下日期组件momentjs转换赋值问题,记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题，需要的朋友可以参考下
vue+element下日期组件momentjs转换赋值问题
记录下使用momentjs转换日期字符串赋值给element的日期组件报错问题；
<el-date-picker
v-model="form.serviceTime"
type="date"
class="fill-w mar-t-xs"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="请选择日期"
:clearable="false"
:editable="false"
>
</el-date-picker>可以看到组件默认显示的format格式大小写是这样的，但是momentJs中format格式转换大小写与element是不一致的，这容易导致报错，所以我这里记录一下。
this.form.serviceTime = moment(this.row.serviceTime).format('YYYY-MM-DD HH:mm:ss');可以看到年与日的大小写不一致，导致转换格式赋值的时候频频报错；
ElementUI中的el-date-picker日期选择器的格式转换问题
使用el-date-picker日期选择器选择的日期是string类型且是箭头所指的这种格式
解决方法一：
1、在这个组件后面加上这两个，可以修改格式
<el-date-picker type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
2、在后端实体类上加上注解
即使前端的是string类型，但是通过json自带的格式匹配注解工具，将string转换成LocalDateTime类型
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private LocalDateTime userBirthday;解决方法二：
用npm下载一个moment.js
1、
npm install moment --save
2、在main.js中注册
import moment from "moment";
//需要汉化
moment.locale('zh-cn');
Vue.prototype.$moment = moment;//赋值使用let date = new Date(moment(this.userInfo.userBirthday).format('YYYY-MM-DD HH:mm:ss'));到此这篇关于vue+element下日期组件momentjs转换赋值问题的文章就介绍到这了,更多相关vue element日期组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
动态权限控制通过后端获取用户权限数据,前端动态生成路由菜单及按钮权限,结合路由守卫与自定义指令实现访问控制,具有一定的参考价值,感兴趣的可以了解一下2025-08-08
viewer.js用于图片浏览的Vue组件,支持旋转、缩放、翻转等操作,这篇文章主要给大家介绍了关于vue3使用viewer的详细用法,文中通过代码介绍是非常详细,需要的朋友可以参考下2023-12-12
我们在开发中常会遇到选择地址的需求,有时候只需要选择省就可以,有时候则需要选择到市、县,以至于乡镇，甚至哪个村都有可能,下面这篇文章主要给大家介绍了关于vue中集成省市区街四级地址组件的相关资料,需要的朋友可以参考下2022-12-12
使用vue-cli3+typescript的项目模板创建工程的教程
这篇文章主要介绍了使用vue-cli3+typescript的项目模板创建工程,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2020-02-02
这篇文章主要介绍了vue 出现data-v-xxx的原因及解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
公司某项目需求在页面显示的组件是根据角色变化而变化的，怎么实现这个效果呢，下面小编给大家介绍下Vue3的setup在el-tab中动态加载组件的方法,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue-router的钩子函数用法,结合实例形式分析了vue路由钩子分类及vue-router钩子函数相关使用技巧,需要的朋友可以参考下2019-10-10
这篇文章主要介绍了vue2.0实现点击其他区域关闭自定义div功能实现,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-06-06
本文介绍如何从零开始构建一个基于 Vue3 + Markdown 的在线简历生成工具,支持实时编辑预览、模板切换、自定义样式配置以及导出为 PDF,感兴趣的小伙伴可以参考阅读本文2025-07-07
Vue表搜索是指在Vue应用中实现对表格数据的搜索功能,下面这篇文章主要给大家介绍了关于VUE el-table列表搜索功能纯前端实现的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
最新评论