分不同版本,如果你是elementplus,也就是vue3版本,你就直接可用方案1;如果你是vue2版本(扒拉了一下源码,组间不支持),方案2、3都行,具体看自己需求。
1、使用:disable-minute和:disable-second属性
在el-date-picker组件中,可以通过:disable-minute和:disable-second属性来禁止选择分钟和秒。例如:
<el-date-picker v-model="value" type="datetime" :disable-minute="true" :disable-second="true"></el-date-picker>
这样设置后,用户将无法选择分钟和秒,只能选择小时。
2、通过CSS禁用下拉框展示
如果需要进一步隐藏分钟和秒的下拉框,可以通过CSS来实现。例如,可以设置popper-class的样式来禁用鼠标响应:
<style>
.el_date_picker .el-input--small {
pointer-events: none; // 设置禁用响应鼠标事件
}
</style>
这种方法通过禁用鼠标事件来阻止用户与分钟和秒的下拉框交互
3、使用:picker-options属性限制时间范围
可以通过:picker-options属性来限制可选的时间范围,虽然这种方法主要用于限制时间范围,但也可以间接达到禁止选择分钟和秒的效果。例如:
<el-date-picker v-model="value" type="datetime" :picker-options="{ start: '00:00', end: '23:59' }"></el-date-picker>
这样设置后,用户只能选择小时,无法选择分钟和秒。
这些方法各有优缺点,可以根据具体需求选择合适的方法:
使用:disable-minute和:disable-second属性是最直接的方法,简单易用。
通过CSS禁用下拉框展示可以提供更细致的控制,但需要编写额外的CSS代码。
使用:picker-options属性限制时间范围则是一种灵活的方法,适用于需要限制时间范围的场景。