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

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>