使用el-time-picker实现开始时间和结束时间选择

最新推荐文章于 2025-04-11 16:55:28 发布

炒荷包蛋

最新推荐文章于 2025-04-11 16:55:28 发布

阅读量5.4k

点赞数 2

分类专栏： element-ui 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42403177/article/details/115677823

版权

element-ui 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了如何在Vue项目中使用Element UI的el-time-picker组件实现开始和结束时间的选择，并通过picker-options和selectableRange属性设置时间选择的范围限制。当开始时间存在时，结束时间范围为开始时间到23:59:59；反之，开始时间为00:00:00到结束时间。代码示例展示了如何在计算属性中动态生成这两个选择器的选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1）问题

在工作中我们会经常使用el-time-picker组件来实现开始时间和结束时间的选择，但是element并没有直接提供给我们可以通过有范围限制的选择，而需要我们自己使用picker-options属性结合selectableRange参数实现时间选择框的选择范围规则

2）分析时间选择范围规则

开始时间选择框
- 如果有结束时间，则00:00:00-结束时间
- 没有结束时间，则00:00:00-23:59:59
结束时间选择框
- 如果有开始时间，则开始时间-23:59:59
- 如果没有开始时间，则00:00:00-23:59:59

3）代码实现

我们将picker-options属性值写在computed计算属性中（也可以以对象的形式赋值给picker-options属性值，可以根据自己写代码的习惯来决定何种方式）

computed: {
    // 开始时间
    startTimeOptions() {
        return {
            selectableRange: `00:00:00-${this.form.endTime ? this.form.endTime : '23:59:59'}`
        }
    },
        // 结束时间
        endTimeOptions() {
            return {
                selectableRange: `${this.form.startTime ? this.form.startTime : '00:00:00'}-23:59:59}`
            }
        }
}

将上面的计算属性赋值给picker-options属性

<el-form-item label="开始时间:">
    <el-time-picker
                    v-model="form.startTime"
                    placeholder="开始时间"
                    :picker-options="startTimeOptions"
                    >
    </el-time-picker>
</el-form-item>
<el-form-item label="结束时间:">
    <el-time-picker
                    v-model="form.endTime"
                    placeholder="结束时间"
                    :picker-options="endTimeOptions"
                    >
    </el-time-picker>
</el-form-item>