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日期组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue中使用vue-touch插件的方法，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-07-07
这篇文章主要给大家介绍了关于Vue项目中使用jquery的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧2019-05-05
最近通过在网上查找资料，自己整合研究了一个可以直接在表格中操作数据的基于element-ui的前端模板。可以让增改数据的操作显得方便一点，感兴趣的可以了解一下2021-12-12
VUE使用ElementUI下拉框 @change事件数据不回显问题
这篇文章主要介绍了VUE使用ElementUI下拉框 @change事件数据不回显问题。具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-02-02
vite2打包的时候vendor-xxx.js文件过大的解决方法
vite2是一个非常好用的工具，只是随着代码的增多，打包的时候 vendor-xxxxxx.js 文件也越来越大，本文主要介绍了vite2打包的时候vendor-xxx.js文件过大的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
这篇文章主要为大家介绍了vue3.2最新语法使用socket.io实现即时通讯详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了vue里swiper的一些坑及swiper在vue中的使用,本文分步骤给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-08-08
这篇文章主要给大家介绍了关于VUE3 Vite打包后动态图片资源不显示问题的解决方法,可能是因为在部署后的服务器环境中对中文文件名的支持不完善,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-09-09
这篇文章主要介绍了vue如何实现级联选择器功能问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-04-04
本文主要介绍了SpringBoot实现全局和局部跨域的两种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
最新评论