vue+element下日期組件momentjs轉(zhuǎn)換賦值問題解決
vue+element下日期組件momentjs轉(zhuǎn)換賦值問題
記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報(bào)錯問題;
<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)致報(bào)錯,所以我這里記錄一下。
this.form.serviceTime = moment(this.row.serviceTime).format('YYYY-MM-DD HH:mm:ss');
可以看到年與日的大小寫不一致,導(dǎo)致轉(zhuǎn)換格式賦值的時(shí)候頻頻報(bào)錯;
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、在后端實(shí)體類上加上注解
即使前端的是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使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題
這篇文章主要介紹了VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題。具有很好的參考價(jià)值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-02-02vite2打包的時(shí)候vendor-xxx.js文件過大的解決方法
vite2是一個非常好用的工具,只是隨著代碼的增多,打包的時(shí)候?vendor-xxxxxx.js?文件也越來越大,本文主要介紹了vite2打包的時(shí)候vendor-xxx.js文件過大的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解
這篇文章主要為大家介紹了vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06VUE3?Vite打包后動態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動態(tài)圖片資源不顯示問題的解決方法,可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對中文文件名的支持不完善,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09vue如何實(shí)現(xiàn)級聯(lián)選擇器功能
這篇文章主要介紹了vue如何實(shí)現(xiàn)級聯(lián)選擇器功能問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01