vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題解決
vue+element下日期組件momentjs轉(zhuǎn)換賦值問(wèn)題
記錄下使用momentjs轉(zhuǎn)換日期字符串賦值給element的日期組件報(bào)錯(cuò)問(wèn)題；
<el-date-picker
v-model="form.serviceTime"
type="date"
class="fill-w mar-t-xs"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="請(qǐng)選擇日期"
:clearable="false"
:editable="false"
>
</el-date-picker>可以看到組件默認(rèn)顯示的format格式大小寫(xiě)是這樣的，但是momentJs中format格式轉(zhuǎn)換大小寫(xiě)與element是不一致的，這容易導(dǎo)致報(bào)錯(cuò)，所以我這里記錄一下。
this.form.serviceTime = moment(this.row.serviceTime).format('YYYY-MM-DD HH:mm:ss');可以看到年與日的大小寫(xiě)不一致，導(dǎo)致轉(zhuǎn)換格式賦值的時(shí)候頻頻報(bào)錯(cuò)；
ElementUI中的el-date-picker日期選擇器的格式轉(zhuǎn)換問(wèn)題
使用el-date-picker日期選擇器選擇的日期是string類(lèi)型且是箭頭所指的這種格式
解決方法一：
1、在這個(gè)組件后面加上這兩個(gè)，可以修改格式
<el-date-picker type="date" placeholder="選擇日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
2、在后端實(shí)體類(lèi)上加上注解
即使前端的是string類(lèi)型，但是通過(guò)json自帶的格式匹配注解工具，將string轉(zhuǎn)換成LocalDateTime類(lèi)型
@JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss", timezone = "GMT+8")
private LocalDateTime userBirthday;解決方法二：
用npm下載一個(gè)moment.js
1、
npm install moment --save
2、在main.js中注冊(cè)
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)換賦值問(wèn)題的文章就介紹到這了,更多相關(guān)vue element日期組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue中使用vue-touch插件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
Vue項(xiàng)目中使用jquery的簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用jquery的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
最近通過(guò)在網(wǎng)上查找資料，自己整合研究了一個(gè)可以直接在表格中操作數(shù)據(jù)的基于element-ui的前端模板。可以讓增改數(shù)據(jù)的操作顯得方便一點(diǎn)，感興趣的可以了解一下2021-12-12
VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問(wèn)題
這篇文章主要介紹了VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問(wèn)題。具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-02-02
vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法
vite2是一個(gè)非常好用的工具，只是隨著代碼的增多，打包的時(shí)候?vendor-xxxxxx.js?文件也越來(lái)越大，本文主要介紹了vite2打包的時(shí)候vendor-xxx.js文件過(guò)大的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3.2最新語(yǔ)法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解
這篇文章主要為大家介紹了vue3.2最新語(yǔ)法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問(wèn)題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動(dòng)態(tài)圖片資源不顯示問(wèn)題的解決方法,可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對(duì)中文文件名的支持不完善,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能
這篇文章主要介紹了vue如何實(shí)現(xiàn)級(jí)聯(lián)選擇器功能問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01