關(guān)于element-ui日期時間選擇器選不中12小時以后的時間詳解
更新時間：2022年08月11日 10:57:45 作者：愛劃水de鯨魚哥
在之前做個一個組件頁面中,引用了element-ui組件的日期選擇器,遇到的一個小問題,下面這篇文章主要給大家介紹了關(guān)于element-ui日期時間選擇器選不中12小時以后時間的相關(guān)資料,需要的朋友可以參考下
前言
最近在工作中用到了element-ui的el-date-picker日期時間選擇器，遇到了一個小問題，設置完自定義完時間格式后選不中12小時以后的時間。甚是苦惱，最后發(fā)現(xiàn)是設置的時間格式有取值范圍。雖然不是什么大問題，但是不細心很容易掉坑，所以總結(jié)分享出來給大家避坑。
自定義完時間格式
在el-date-picker標簽上設置value-format屬性，可以設置時間格式。
<el-date-picker
value-format="yyyy-MM-dd hh:mm:ss"
</el-date-picker>使用el-date-picker日期時間選擇器，修改時間格式幾乎是必要的。但修改時間格式要注意一下對應的取值范圍。
通常我們最后的格式就是這樣的：
yyyy-MM-dd hh:mm:ss是12小時制
但是，要注意，自定義時間日期格式為yyyy-MM-dd hh:mm:ss是12小時制的，也就是后選不中12:00以后時間的。
如圖所示：選擇14點后變?yōu)?點。
各格式的取值范圍：
yyyy-MM-dd HH:mm:ss才是24小時制
如圖所知，yyyy-MM-dd hh:mm:ss格式時12小時制，要使用24小時制應該使用yyyy-MM-dd HH:mm:ss格式。
value-format屬性修改為yyyy-MM-dd HH:mm:ss格式，即可選中12小時之后的時間。
示例代碼：
<div class="block">
<el-date-picker
v-model="plan.runTime"
type="datetime"
value-format="yyyy-MM-dd HH:mm:ss"
placeholder="選擇日期時間">
</el-date-picker>
</div>結(jié)語
到此這篇關(guān)于element-ui日期時間選擇器選不中12小時以后的時間的文章就介紹到這了,更多相關(guān)element-ui日期時間選擇器選不中內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了淺談Vant-list?上拉加載及下拉刷新的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了mpvue將vue項目轉(zhuǎn)換為小程序的相關(guān)資料及mpvue開發(fā)流程，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-09-09
關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼
這篇文章主要介紹了關(guān)于vue項目中搜索節(jié)流的實現(xiàn)代碼,代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-09-09
Vuex處理用戶Token過期及優(yōu)化設置封裝本地存儲操作模塊
這篇文章主要為大家介紹了Vuex處理用戶Token優(yōu)化設置封裝本地存儲操作模塊及Token?過期問題詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了vue3?中使用?jsx?開發(fā),本文著重說一下在使用 .vue 文件和 .jsx 文件在使用語法上的差異，需要的朋友可以參考下2022-09-09
這篇文章主要介紹了vue+vux實現(xiàn)移動端文件上傳樣式,樣式使用的是vux的cell組件，需要的朋友可以參考下2017-07-07
這篇文章主要為大家詳細介紹了Vue2如何利用echarts繪制折線圖,餅圖和大圖，文中的示例代碼簡潔易懂，具有一定的借鑒價值，需要的可以參考一下2023-04-04
這篇文章主要介紹了Vue-less的使用和deep深度選擇器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue .then和鏈式調(diào)用操作方法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
Electron相當于一個瀏覽器的外殼,可以把現(xiàn)有的vue程序嵌入到殼里面,下面這篇文章主要給大家介紹了關(guān)于如何使用electron將vue項目打包成exe的相關(guān)資料,需要的朋友可以參考下2023-01-01