關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
前言
最近在工作中用到了element-ui的el-date-picker
日期時(shí)間選擇器,遇到了一個(gè)小問題,設(shè)置完自定義完時(shí)間格式后選不中12小時(shí)以后的時(shí)間。甚是苦惱,最后發(fā)現(xiàn)是設(shè)置的時(shí)間格式有取值范圍。雖然不是什么大問題,但是不細(xì)心很容易掉坑,所以總結(jié)分享出來給大家避坑。
自定義完時(shí)間格式
在el-date-picker標(biāo)簽上設(shè)置value-format
屬性,可以設(shè)置時(shí)間格式。
<el-date-picker value-format="yyyy-MM-dd hh:mm:ss" </el-date-picker>
使用el-date-picker
日期時(shí)間選擇器,修改時(shí)間格式幾乎是必要的。但修改時(shí)間格式要注意一下對應(yīng)的取值范圍。
通常我們最后的格式就是這樣的:
yyyy-MM-dd hh:mm:ss是12小時(shí)制
但是,要注意,自定義時(shí)間日期格式為yyyy-MM-dd hh:mm:ss
是12小時(shí)制的,也就是后選不中12:00以后時(shí)間的。
如圖所示:選擇14點(diǎn)后變?yōu)?點(diǎn)。
各格式的取值范圍:
yyyy-MM-dd HH:mm:ss才是24小時(shí)制
如圖所知,yyyy-MM-dd hh:mm:ss
格式時(shí)12小時(shí)制,要使用24小時(shí)制應(yīng)該使用yyyy-MM-dd HH:mm:ss
格式。
value-format
屬性修改為yyyy-MM-dd HH:mm:ss
格式,即可選中12小時(shí)之后的時(shí)間。
示例代碼:
<div class="block"> <el-date-picker v-model="plan.runTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" placeholder="選擇日期時(shí)間"> </el-date-picker> </div>
結(jié)語
到此這篇關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間的文章就介紹到這了,更多相關(guān)element-ui日期時(shí)間選擇器選不中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式)
- element-ui時(shí)間日期選擇器限制選擇范圍的幾種場景
- element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:"placement"解決方式
- ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)
- Element DateTimePicker日期時(shí)間選擇器的使用示例
- 詳解element-ui日期時(shí)間選擇器的日期格式化問題
- element日期時(shí)間選擇器限制時(shí)間選擇功能實(shí)現(xiàn)(精確到小時(shí))
相關(guān)文章
mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序
這篇文章主要介紹了mpvue將vue項(xiàng)目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開發(fā)流程,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項(xiàng)目中搜索節(jié)流的實(shí)現(xiàn)代碼,代碼簡單易懂,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-09-09Vuex處理用戶Token過期及優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設(shè)置封裝本地存儲(chǔ)操作模塊及Token?過期問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式
這篇文章主要介紹了vue+vux實(shí)現(xiàn)移動(dòng)端文件上傳樣式,樣式使用的是vux的cell組件,需要的朋友可以參考下2017-07-07vue .then和鏈?zhǔn)秸{(diào)用操作方法
這篇文章主要介紹了vue .then和鏈?zhǔn)秸{(diào)用操作方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-07-07手把手教你使用electron將vue項(xiàng)目打包成exe
Electron相當(dāng)于一個(gè)瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關(guān)于如何使用electron將vue項(xiàng)目打包成exe的相關(guān)資料,需要的朋友可以參考下2023-01-01