首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue element 日期时间组件选择器

Vue+element 日期时间组件选择器精确到分钟禁止选秒的配置方法

2025-07-03 09:49:34 作者：蓝胖子的多啦A梦

文章介绍如何在Vue+Element UI中配置日期时间选择器精确到分钟并禁用秒选择,通过设置显示格式和样式实现,同时提供相关扩展内容参考,感兴趣的朋友一起看看吧

如图

添加输入框显示格式

 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;
}

到此这篇关于Vue+element 日期时间组件选择器精确到分钟，禁止选秒的配置的文章就介绍到这了,更多相关Vue element 日期时间组件选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！