vue3項目+element-plus:時間選擇器格式化方式
更新時間：2024年03月18日 09:47:25 作者：一杯清酒.
這篇文章主要介紹了vue3項目+element-plus:時間選擇器格式化方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue3項目+element-plus:時間選擇器格式化
讓時間選擇器獲取的時間格式化；
此處elementUI和element-plus的API不同
關鍵兩行代碼：
format="YYYY/MM/DD hh:mm:ss" value-format="YYYY-MM-DD h:m:s"
<el-date-picker
v-model="addForm.time"
type="datetime"
placeholder="請選擇日期"
format="YYYY/MM/DD hh:mm:ss"
value-format="YYYY-MM-DD h:m:s"/> element-plus日期選擇器value-format出錯
設置日期選擇器DatePicker，使用valu-formate，根據element官網代碼應該是如下寫法：
<div class="block">
<span class="demonstration">使用 value-format</span>
<div class="demonstration">值：{{ value2 }}</div>
<el-date-picker
v-model="value2"
type="date"
placeholder="選擇日期"
format="yyyy 年 MM 月 dd 日"
value-format="yyyy-MM-dd">
</el-date-picker>
</div>但是設置日期后會得到的值為“yyyy-02-Mo”
網上沒有搜到原因，用的是vue3，element-plus，github上查看了一下
源碼【packages/time-picker/src/common/picker.vue】文檔用的是大寫
就將格式化的格式寫為 format="YYYY-MM-DD" value-format="YYYY-MM-DD" 。
嗯……emm……就是大寫……然后好了……不知道為啥ε(┬┬﹏┬┬)3
時間戳轉換是
format="YYYY/MM/DD" value-format="X" 【10位】 value-format="x" 【13位】
但是選擇框沒有顯示，找了一會說是dayjs……沒繼續(xù)查找
總結
以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
Vue中的scoped和 elememt-plus的樣式修改方法
Vue中的scoped屬性用于實現樣式隔離,確保組件間的樣式互不影響,通過在組件的style標簽內添加任何內容,可以為組件生成一個唯一的哈希值,從而實現樣式的定位,本文通過實例代碼講解Vue中的scoped和 elememt-plus的樣式修改方法,感興趣的朋友一起看看吧2025-01-01
這篇文章主要介紹了如何解決vue在ios微信"復制鏈接"功能問題，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-03-03
vue組件之間的通信方式有很多種,props/emit,event bus,vuex,provide/inject等,還有一種通信方式就是$attrs和$listeners,下面這篇文章主要給大家介紹了關于vue2.x中$attrs和$listeners的相關資料,需要的朋友可以參考下2022-03-03
這篇文章主要介紹了在vue中使用?jquery?的兩種方法小結，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue移動端UI框架實現仿qq側邊菜單組件,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2018-03-03
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉跳操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
最近在項目開發(fā)中,就遇到了這個問題,Vue中如何使一個div鋪滿全屏,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2024-07-07
這篇文章主要介紹了JavaScript 沙箱探索，沙箱是基于 event bus 形式的通信實現上層的功能，文章的例子選擇接口實現了 web worker 與 quickjs 的 EventEmitter，,需要的朋友可以參考一下2021-10-10
這篇文章主要為大家詳細介紹了Vue的組件間通信方式，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-03-03
這篇文章主要介紹了vue如何關閉prettier警告warn問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03