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 日期时间组件选择器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue项目如何实现ip和localhost同时访问，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue-cli脚手架初始化项目各个文件夹用途,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-01-01
这篇文章主要介绍了Element Card 卡片的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
关于element ui中的el-scrollbar横向滚动问题
这篇文章主要介绍了关于element ui中的el-scrollbar横向滚动问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了Vue3全局组件通信之provide / inject,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
这篇文章主要给大家介绍了关于Vue2.x安装并使用SCSS的相关资料,以及如何在vue 2.x中全局引用公共scss文件,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了vue3中如何使用ts，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要给大家介绍了关于vue如何处理base64格式文件pdf及图片预览功能的相关资料,图片的base64编码就是可以将一副图片数据编码成一串字符串,使用该字符串代替图像地址,需要的朋友可以参考下2024-05-05
完美解决vue中报错 “TypeError: Cannot read properties of null
这篇文章主要介绍了完美解决vue中报错 “TypeError: Cannot read properties of null (reading ‘forEach‘)“,本文给大家分享详细解决方案，需要的朋友可以参考下2023-02-02
这篇文章主要介绍了Vue3中的ref为何要用.value进行值的调用，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-09-09
最新评论