Element-UI:el-date-picker里的picker-options——用来限制选择日期的范围

前言

在写项目点过程中遇到这样的需求：日期选择范围不得超过一年

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、el-date-picker

el-date-picker是element UI中的日期选择器组件，主要用来选择日期时间，有的时候需要对日期选择的范围有所限制，例如：日期选择范围不能超过一个月，可以通过picker-options进行控制。
官方文档：https://element.eleme.cn/#/zh-CN/component/date-picker

二、使用

1.组件

代码如下（示例）：

<el-date-picker
    :picker-options="pickerOptions"
    v-model="teachTime"
    style="width: 380px"
    type="daterange"
    range-separator="至"
    start-placeholder="授课开始日期"
    end-placeholder="授课结束日期">
</el-date-picker>

2.方法

代码如下（示例）：

export default {
    data() {
        return {
            teachTime:'',
            pickDate:'',
            pickerOptions: {
                onPick: ({maxDate, minDate}) => {
                    this.pickDate = minDate.getTime()
                    if (maxDate) {
                        this.pickDate = ''
                    }
                },
                disabledDate: time => {
                    let choiceDateTime = new Date(this.pickDate).getTime()
                    const minTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() - 1);
                    const maxTime = new Date(choiceDateTime).setMonth(new Date(choiceDateTime).getMonth() + 1);
                    const min = minTime;
                    const max = maxTime
                    if (this.pickDate) {
                        return time.getTime() < min || time.getTime() > max;
                    }
                }
            },
        }
	}
}

3.效果

以选择3月11日为例