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

Element Vue About 2,126 words

需求

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

代码

添加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-012020-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();
                }
            }
        }
    }
}
Views: 6,847 · Posted: 2020-11-26

————        END        ————

Give me a Star, Thanks:)

https://github.com/fendoudebb/LiteNote

扫描下方二维码关注公众号和小程序↓↓↓

扫描下方二维码关注公众号和小程序↓↓↓


Today On History
Browsing Refresh