el-date-picker 限制小时的选择

实现 Element UI el-date-picker 组件中限制可选小时范围
为了实现这一功能，可以利用 picker-options 属性中的自定义选项来控制时间的选择行为。具体来说，通过设置 selectableRange 来限定可以选择的时间段。
对于仅限于特定小时内选择的情况，可以在 picker-options 中配置 selectableRange 参数，该参数接受一个字符串数组作为值，每个元素代表一天内允许被选取的一个时间段[^1]。
下面是一个具体的例子展示如何只允许用户在一个指定范围内挑选小时：
<template>
<div>
<!-- 使用 selectableRange 控制可选时间 -->
<el-date-picker
v-model="value"
type="datetime"
placeholder="Select date and time"
:picker-options="pickerOptions">
</el-date-picker>
</div>
</template>

<script>
export default {
data () {
return {
value: '',
pickerOptions: {
// 设置可选时间为每天的8点到19点之间
selectableRange: ['08:00:00-19:00:00']
}
};
},
};
</script>
登录后复制
上述代码片段展示了怎样设定 selectableRange 只让使用者能在每日上午八点钟至晚上七点钟这段期间做选择。如果希望进一步细化到更精确的小段时间间隔，则可以根据需求调整这个区间内的起始时间和结束时间[^2]。