Vue+element 日期時間組件選擇器精確到分鐘禁止選秒的配置方法
更新時間：2025年07月03日 09:49:34 作者：藍胖子的多啦A夢
文章介紹如何在Vue+Element UI中配置日期時間選擇器精確到分鐘并禁用秒選擇,通過設置顯示格式和樣式實現(xiàn),同時提供相關(guān)擴展內(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;
}這樣就可以顯示到分了~
同理， 選擇器精確到小時，并且禁止選分鐘和秒的配置
添加顯示格式
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 日期時間組件選擇器精確到分鐘，禁止選秒的配置的文章就介紹到這了,更多相關(guān)Vue element 日期時間組件選擇器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue-seamless-scroll 實現(xiàn)簡單自動無縫滾動且添加對應點擊事件的簡單整理
vue-seamless-scroll是一個基于Vue.js的簡單無縫滾動組件, 基于requestAnimationFrame實現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動，單步滾動，及支持水平方向的手動切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實現(xiàn)自動無縫滾動的效果，并對應添加點擊事件2023-01-01
在Vue中，父子組件之間通過Prop和Event實現(xiàn)了數(shù)據(jù)的雙向綁定，但是，Vue設計者為什么不允許子組件修改父組件傳遞的Prop呢，本文就來帶大家探究為什么子組件不能修改Prop,需要的朋友可以參考下2023-06-06
在Vue模板中啟用這些表現(xiàn)力庫插件的最簡單方法是在初始化項目時安裝它們,或使用 npm install（或 yarn add）安裝包,這篇文章主要介紹了Vue3中如何使用SCSS編寫樣式,需要的朋友可以參考下2023-12-12
這篇文章主要給大家介紹了關(guān)于VUE中鼠標滾輪使div左右滾動的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
作為一個曾經(jīng)的Java?coder,當?shù)谝淮慰吹絡s里面的裝飾器Decorator,就馬上想到了Java中的注解,當然在實際原理和功能上面,Java的注解和js的裝飾器還是有很大差別的,這篇文章主要給大家介紹了關(guān)于Vue項目之ES6裝飾器在項目實戰(zhàn)中應用的相關(guān)資料,需要的朋友可以參考下2022-06-06
詳解使用VUE搭建后臺管理系統(tǒng)(vue-cli更新至3.0)
這篇文章主要介紹了詳解使用VUE搭建后臺管理系統(tǒng)(vue-cli更新至3.0),小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue3+Vite如何解決“找不到模塊“@/components/xxx.vue”或其相應的類型聲明ts(2307)”
在Vue項目中使用Vite時,可能因版本差異而需修改tsconfig.app.json而非tsconfig.json以解決編譯錯誤,本文分享個人解決經(jīng)驗,供參考2024-10-10
這篇文章主要介紹了vue 實現(xiàn)剪裁圖片并上傳服務器功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-03-03
Vue3+Vite項目引入Bootstrap5、bootstrap-icons方式
這篇文章主要介紹了Vue3+Vite項目引入Bootstrap5、bootstrap-icons方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue項目部署到Apache中遇到的問題解決，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08