Element UI DatePicker 时间跨度限制在同一个月内

需求

因后端数据是按月分区表，所以查询数据必须按不能跨月的日期查询。

代码

添加picker-options熟悉。

<el-date-picker
    :picker-options="pickerOptions"
    v-model="rangeTime"
    type="daterange"
    value-format="timestamp"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期">
</el-date-picker>

onPick：当选择日期时的回调，disabledDate：禁用日期，selectData：记录第一次选择的时间。

data: function() {
    return {
        selectData: '',
        pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
                this.selectData = minDate.getTime()
                if (maxDate) {
                    // 选择了最大日期后，清除已选日期，解除限制。
                    this.selectData = ''
                }
            },
            disabledDate: (time) => {
                // 是否禁用日期选择
                if (this.selectData) {
                    let date = new Date(this.selectData)
                    // true：不可以选择该日期；false：可以选择该日期。
                    // 大于或者小于本月的日期被禁用
                    return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth()
                } else {
                    return false;
                }
            }
        }
    }
}

扩展

限制只能选择当天之前的时间，如：今天2020-11-20，则11月只能选择2020-11-01到2020-11-20及之前的时间，11月之前的时间可正常选择，2020-11-20之后的时间禁止选择。

data: function() {
    return {
        selectData: '',
        pickerOptions: {
            onPick: ({ maxDate, minDate }) => {
                this.selectData = minDate.getTime()
                if (maxDate) {
                    this.selectData = ''
                }
            },
            disabledDate: (time) => {
                if (this.selectData) {
                    var date = new Date(this.selectData)
                    // 这里就是限制的关键，大于或者小于本月的日期被禁用
                    // 选择起始时间后，依旧需要判断禁止当天之后的时间
                    return date.getMonth() > new Date(time).getMonth() || date.getMonth() < new Date(time).getMonth() || time.getTime() > Date.now()
                } else {
                    // 默认禁止当天之后的时间
                    return time.getTime() > Date.now();
                }
            }
        }
    }
}