elementui-日期选择组件-控制选择日期长度不超过30天

date-picker-before.jpg
date-picker-after.jpg

• 最终效果如上图所示，假设起始日期为 2019.07.10，那么可选结束日期的范围只能是距离2019.7.10这个日期的30天以内，所以可选日期范围是 6.10-7.10 和 7.10-8.09

• 代码如下：

        <!-- 日期选择组件 -->
        <div class="date-box">
            <div>选择日期：</div>
            <div class="search-box-time">
                <el-date-picker
                    size="small"
                    :clearable=false
                    v-model="valueDate"
                    :picker-options="pickerOptions"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                >
                </el-date-picker>
            </div>
        </div>

        mounted () {
           // 保存this指向
            thisVue = this;
        },
        data: {
            // 日期
            valueDate: '',
            timeOptionRange: null,
            pickerOptions: {
                disabledDate(time) {
                    // 获取选中时间
                    let timeOptionRange = thisVue.timeOptionRange;
                    // 获取时间范围(30天的毫秒数)
                    let secondNum = 30 * 24 * 60 * 60 * 1000;
                    if (timeOptionRange) {
                        //如果有选中时间 设置超过选中时间后的30天||超过选中前的30天||大于当前时间 不可选
                        return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum || time.getTime() > (Date.now() - 8.64e6);
                    } else {
                        //如果没有选中时间（初始化状态） 设置当前时间后的时间不可选
                        return time.getTime() > (Date.now() - 8.64e6);
                    }
                },
                onPick(maxDate, minDate) {
                    // 当选中了第一个日期还没选第二个
                    // 只选中一个的时候自动赋值给minDate，当选中第二个后组件自动匹配，将大小日期分别赋值给maxDate、minDate
                    if (maxDate.minDate && !maxDate.maxDate) {
                        thisVue.timeOptionRange = maxDate.minDate;
                    }
                    // 如果有maxDate属性，表示2个日期都选择了，则重置timeOptionRange
                    if (maxDate.maxDate) {
                        thisVue.timeOptionRange = null;
                    }
                }
            }
        },

• picker-options、disabledDate、onPick 的解释请参考官方文档DatePicker 日期选择器
• 值得注意的是 disabledDate 和 onPick 中获取到的 this 指向 el-date-picker 实例