vue+element下日期組件momentjs轉(zhuǎn)換賦值問題解決
更新時間：2024年02月27日 10:00:39 作者：殺豬刀-墨林
這篇文章主要介紹了vue+element下日期組件momentjs轉(zhuǎn)換賦值問題,記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報錯問題，需要的朋友可以參考下
vue+element下日期組件momentjs轉(zhuǎn)換賦值問題
記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給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>可以看到組件默認(rèn)顯示的format格式大小寫是這樣的，但是momentJs中format格式轉(zhuǎn)換大小寫與element是不一致的，這容易導(dǎo)致報錯，所以我這里記錄一下。
this.form.serviceTime = moment(this.row.serviceTime).format('YYYY-MM-DD HH:mm:ss');可以看到年與日的大小寫不一致，導(dǎo)致轉(zhuǎn)換格式賦值的時候頻頻報錯；
ElementUI中的el-date-picker日期選擇器的格式轉(zhuǎn)換問題
使用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轉(zhuǎn)換成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'));到此這篇關(guān)于vue+element下日期組件momentjs轉(zhuǎn)換賦值問題的文章就介紹到這了,更多相關(guān)vue element日期組件內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue中動態(tài)權(quán)限控制的實現(xiàn)示例
動態(tài)權(quán)限控制通過后端獲取用戶權(quán)限數(shù)據(jù),前端動態(tài)生成路由菜單及按鈕權(quán)限,結(jié)合路由守衛(wèi)與自定義指令實現(xiàn)訪問控制,具有一定的參考價值,感興趣的可以了解一下2025-08-08
viewer.js用于圖片瀏覽的Vue組件,支持旋轉(zhuǎn)、縮放、翻轉(zhuǎn)等操作,這篇文章主要給大家介紹了關(guān)于vue3使用viewer的詳細(xì)用法,文中通過代碼介紹是非常詳細(xì),需要的朋友可以參考下2023-12-12
vue中集成省市區(qū)街四級地址組件的實現(xiàn)過程
我們在開發(fā)中常會遇到選擇地址的需求,有時候只需要選擇省就可以,有時候則需要選擇到市、縣,以至于鄉(xiāng)鎮(zhèn)，甚至哪個村都有可能,下面這篇文章主要給大家介紹了關(guān)于vue中集成省市區(qū)街四級地址組件的相關(guān)資料,需要的朋友可以參考下2022-12-12
使用vue-cli3+typescript的項目模板創(chuàng)建工程的教程
這篇文章主要介紹了使用vue-cli3+typescript的項目模板創(chuàng)建工程,本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值，需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue 出現(xiàn)data-v-xxx的原因及解決，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
Vue3的setup在el-tab中動態(tài)加載組件的方法
公司某項目需求在頁面顯示的組件是根據(jù)角色變化而變化的，怎么實現(xiàn)這個效果呢，下面小編給大家介紹下Vue3的setup在el-tab中動態(tài)加載組件的方法,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue-router的鉤子函數(shù)用法,結(jié)合實例形式分析了vue路由鉤子分類及vue-router鉤子函數(shù)相關(guān)使用技巧,需要的朋友可以參考下2019-10-10
vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能
這篇文章主要介紹了vue2.0實現(xiàn)點擊其他區(qū)域關(guān)閉自定義div功能實現(xiàn),本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06
本文介紹如何從零開始構(gòu)建一個基于 Vue3 + Markdown 的在線簡歷生成工具,支持實時編輯預(yù)覽、模板切換、自定義樣式配置以及導(dǎo)出為 PDF,感興趣的小伙伴可以參考閱讀本文2025-07-07
VUE?el-table列表搜索功能純前端實現(xiàn)方法
Vue表搜索是指在Vue應(yīng)用中實現(xiàn)對表格數(shù)據(jù)的搜索功能,下面這篇文章主要給大家介紹了關(guān)于VUE?el-table列表搜索功能純前端實現(xiàn)的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09