elementUI时间选择器限制时间范围

最新推荐文章于 2024-12-04 14:40:14 发布

原创最新推荐文章于 2024-12-04 14:40:14 发布

· 976 阅读

1 ·

版权

文章标签：

#elementui #vue.js #javascript

elementUI 专栏收录该内容

2 篇文章

订阅专栏

在vue.js项目中使用elementUI时间选择器，遇到需限制开始时间小于结束时间，结束时间大于开始时间的需求。由于elementUI的时间选择器默认不提供此功能，需要自定义解决方案。

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

elementUI时间选择器限制时间范围

需求： 在项目开发中，我们需要在一个数据新增的时候，选择开始时间和结束时间，要求开始时间不能在结束时间之后，结束实现不能在开始时间之前。
痛点： elementUI自带的时间选择器模板并没有相关的限制。
解决方法：

//我们使用文档中的属性：picker-options 进行处理
//picker-options下有个disabledDate的参数，可以用来设置禁用状态
//因此我们只需将选择的时间之前或之后的时间设置成禁用就好了


el-form-item label="开始年月" :label-width="labelWidth" prop="startMonthId">
    <el-date-picker
        @change="dateChange(0)"
        v-model="submitObj.startMonthId"
        type="month"
        placeholder="选择开始年月"
        style="width:100%"
        :picker-options="pickerOptionsStart"
        >
    </el-date-picker>
</el-form-item>

<script>
    export default {
        data() {
            return {
                pickerOptionsStart: {
                    disabledDate: time => {
                        return time.getTime() > Date.now() - 8.64e6
                    },
            }
        }
    }
</script>