關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間詳解
前言
最近在工作中用到了element-ui的el-date-picker日期時(shí)間選擇器，遇到了一個(gè)小問(wèn)題，設(shè)置完自定義完時(shí)間格式后選不中12小時(shí)以后的時(shí)間。甚是苦惱，最后發(fā)現(xiàn)是設(shè)置的時(shí)間格式有取值范圍。雖然不是什么大問(wèn)題，但是不細(xì)心很容易掉坑，所以總結(jié)分享出來(lái)給大家避坑。
自定義完時(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í)間格式要注意一下對(duì)應(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é)語(yǔ)
到此這篇關(guān)于element-ui日期時(shí)間選擇器選不中12小時(shí)以后的時(shí)間的文章就介紹到這了,更多相關(guān)element-ui日期時(shí)間選擇器選不中內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
- Element Plus 日期選擇器獲取選中的日期格式(當(dāng)前日期/時(shí)間戳格式）
- element-ui時(shí)間日期選擇器限制選擇范圍的幾種場(chǎng)景
- element?ui時(shí)間日期選擇器el-date-picker報(bào)錯(cuò)Prop?being?mutated:"placement"解決方式
- ElementUI日期選擇器時(shí)間選擇范圍限制的實(shí)現(xiàn)
- Element DateTimePicker日期時(shí)間選擇器的使用示例
- 詳解element-ui日期時(shí)間選擇器的日期格式化問(wèn)題
- element日期時(shí)間選擇器限制時(shí)間選擇功能實(shí)現(xiàn)(精確到小時(shí))
相關(guān)文章
本文通過(guò)實(shí)例代碼給大家介紹了vue中的無(wú)限循環(huán)，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧2017-09-09
vue watch監(jiān)聽(tīng)對(duì)象及對(duì)應(yīng)值的變化詳解
下面小編就為大家分享一篇vue watch監(jiān)聽(tīng)對(duì)象及對(duì)應(yīng)值的變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Element-UI Table組件上添加列拖拽效果實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Element-UI Table組件上添加列拖拽效果的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
這篇文章主要為大家介紹了手寫(xiě)一個(gè)vite插件教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
說(shuō)說(shuō)Vue.js中的functional函數(shù)化組件的使用
這篇文章主要介紹了說(shuō)說(shuō)Vue.js中的functional函數(shù)化組件的使用，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02
本篇文章主要介紹了深入理解Vue生命周期和手動(dòng)掛載，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印
這篇文章主要介紹了vue中的vue-print-nb如何實(shí)現(xiàn)頁(yè)面打印，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決
這篇文章主要介紹了vue-cli3在main.js中console.log()會(huì)報(bào)錯(cuò)的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例
今天小編就為大家分享一篇Vue解析帶html標(biāo)簽的字符串為dom的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11