快捷導(dǎo)航

Vue+element 日期時(shí)間組件選擇器精確到分鐘禁止選秒的配置方法

更新時(shí)間：2025年07月03日 09:49:34 作者：藍(lán)胖子的多啦A夢(mèng)

文章介紹如何在Vue+Element UI中配置日期時(shí)間選擇器精確到分鐘并禁用秒選擇,通過(guò)設(shè)置顯示格式和樣式實(shí)現(xiàn),同時(shí)提供相關(guān)擴(kuò)展內(nèi)容參考,感興趣的朋友一起看看吧

如圖

添加輸入框顯示格式

 format="yyyy-MM-dd HH:mm"
 value-format="yyyy-MM-dd HH:mm"

<el-date-picker
    v-model="query.startDate" 
    format="yyyy-MM-dd HH:mm" 
    value-format="yyyy-MM-dd HH:mm" 
    type="datetimerange" 
    range-separator="至" class="date-item" 
    :start-placeholder="$t('NeoLight.startTime')"
    :end-placeholder="$t('NeoLight.endTime')"
    @change="crud.toQuery" 
/>

并修改樣式如下

.el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(3) {
  display: none !important;
}

這樣就可以顯示到分了~

同理，選擇器精確到小時(shí)，并且禁止選分鐘和秒的配置

添加顯示格式

 format="yyyy-MM-dd H"
 value-format="yyyy-MM-dd HH"

<el-date-picker
    v-model="query.startDate" 
    format="yyyy-MM-dd H" 
    value-format="yyyy-MM-dd HH" 
    type="datetimerange" 
    range-separator="至" class="date-item" 
    :start-placeholder="$t('NeoLight.startTime')"
    :end-placeholder="$t('NeoLight.endTime')"
    @change="crud.toQuery" 
/>

并修改樣式

.el-picker-panel{
    .el-scrollbar:nth-of-type(2) {
        display: none !important;
    }
}
.el-time-spinner {
    text-align: center;
}

到此這篇關(guān)于Vue+element 日期時(shí)間組件選擇器精確到分鐘，禁止選秒的配置的文章就介紹到這了,更多相關(guān)Vue element 日期時(shí)間組件選擇器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue項(xiàng)目如何實(shí)現(xiàn)ip和localhost同時(shí)訪問(wèn)
這篇文章主要介紹了vue項(xiàng)目如何實(shí)現(xiàn)ip和localhost同時(shí)訪問(wèn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途
這篇文章主要介紹了vue-cli腳手架初始化項(xiàng)目各個(gè)文件夾用途,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-01-01
Element Card 卡片的具體使用
這篇文章主要介紹了Element Card 卡片的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-07-07
關(guān)于element?ui中的el-scrollbar橫向滾動(dòng)問(wèn)題
這篇文章主要介紹了關(guān)于element?ui中的el-scrollbar橫向滾動(dòng)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue3全局組件通信之provide?/?inject詳解
這篇文章主要介紹了Vue3全局組件通信之provide?/?inject,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-03-03
Vue2.x安裝并使用SCSS的全部過(guò)程
這篇文章主要給大家介紹了關(guān)于Vue2.x安裝并使用SCSS的相關(guān)資料,以及如何在vue 2.x中全局引用公共scss文件,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-03-03
vue3中如何使用ts
這篇文章主要介紹了vue3中如何使用ts，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-05-05
vue如何處理base64格式文件pdf及圖片預(yù)覽功能
這篇文章主要給大家介紹了關(guān)于vue如何處理base64格式文件pdf及圖片預(yù)覽功能的相關(guān)資料,圖片的base64編碼就是可以將一副圖片數(shù)據(jù)編碼成一串字符串,使用該字符串代替圖像地址,需要的朋友可以參考下
2024-05-05
完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?
這篇文章主要介紹了完美解決vue中報(bào)錯(cuò)?“TypeError:?Cannot?read?properties?of?null?(reading?‘forEach‘)“,本文給大家分享詳細(xì)解決方案，需要的朋友可以參考下
2023-02-02
Vue3中的ref為何要用.value進(jìn)行值的調(diào)用呢
這篇文章主要介紹了Vue3中的ref為何要用.value進(jìn)行值的調(diào)用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09