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中使用vue-touch插件的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中使用jquery的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
最近通過在網(wǎng)上查找資料，自己整合研究了一個可以直接在表格中操作數(shù)據(jù)的基于element-ui的前端模板。可以讓增改數(shù)據(jù)的操作顯得方便一點(diǎn)，感興趣的可以了解一下2021-12-12
VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題
這篇文章主要介紹了VUE使用ElementUI下拉框 @change事件數(shù)據(jù)不回顯問題。具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
vite2打包的時(shí)候vendor-xxx.js文件過大的解決方法
vite2是一個非常好用的工具，只是隨著代碼的增多，打包的時(shí)候?vendor-xxxxxx.js?文件也越來越大，本文主要介紹了vite2打包的時(shí)候vendor-xxx.js文件過大的解決方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解
這篇文章主要為大家介紹了vue3.2最新語法使用socket.io實(shí)現(xiàn)即時(shí)通訊詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要介紹了vue里swiper的一些坑及swiper在vue中的使用,本文分步驟給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-08-08
VUE3?Vite打包后動態(tài)圖片資源不顯示問題解決方法
這篇文章主要給大家介紹了關(guān)于VUE3?Vite打包后動態(tài)圖片資源不顯示問題的解決方法,可能是因?yàn)樵诓渴鸷蟮姆?wù)器環(huán)境中對中文文件名的支持不完善,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-09-09
vue如何實(shí)現(xiàn)級聯(lián)選擇器功能
這篇文章主要介紹了vue如何實(shí)現(xiàn)級聯(lián)選擇器功能問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-04-04
SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式
本文主要介紹了SpringBoot實(shí)現(xiàn)全局和局部跨域的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01