Vue element DatePicker日期选择器 选中开始时间，自动选中结束时间（开始时间加7）并且关闭时间控件下拉框，使用pickerOptions对象中 onPick（）方法

功能需求

• 根据当前日期 — 禁止之后的日期
• 据选中开始日期，结束日期为“开始日期自动填充 七天”，并且关闭时间控件下拉框
• 结束日期不能超过“当天日期” 开始日期和结束日期可以为同一天

遇到的问题

• 如何获取开始日期的数据
• 结束日期自动填充后— 如何关闭下拉框
• 无法找到data方法中定义的变量

一定要注意“先清空时间控件定义的变量，在赋值”

解决遇到的问题

如何获取开始日期的数据

从官网我们可以知晓时间控件提供了三个事件：change、blur、focus,然而，并没有符合我们功能需要的。

但是，在Picker Options属性中有一个方法：onPick（） 符合我们功能需求，可以立刻获取我们点击开始时间的数据，选中日期后会执行的回调，只有当 daterange 或 datetimerange 才生效

结束日期自动填充后— 如何关闭下拉框

根据功能当选中的开始日期，结束日期自动填充七天后，下拉框自动关闭

使用方法这个方法：

that.$refs.timeBox.handleClose();

无法找到data方法中定义的变量

这个就涉及到this的指向的问题，就不细说，你只要在全局定一个“this”指向的变量就可以

export default {
	 data () {
	 //定义全局变量 ---  this
		let that = this
		return:{

		}
	}
}

功能实现

根据当前日期 — 禁止选中之后的日期

通过 picker-options 属性 disabledDate（） 方法就可以了，设置禁用状态，参数为当前日期，要求返回 Boolean

pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      } 

据选中的开始日期，结束日期自动填充 七天

通过onPick（）方法，可以获取一个对象，包含选中的数据，判断选中日期加七天转换毫秒数与当前的时间转换毫秒数的大小，如果大于，说明选中日期加七天大于当前的日期，那么结束时间为当前日期。

			const start= new Date(time.minDate);
            const end= new Date();
            start.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
            end.setTime(end.getTime());

整体代码如下：

<template>
    <div>
        <el-date-picker
            v-model="form.timeData"
            type="daterange"
            ref="timeBox"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
        >
        </el-date-picker>
    </div>
</template>
<script>
export default {
    data() {
        //定义全局变量 ---  this
        let that = this;
        return {
            form: {
                timeData: []
            },
            pickerOptions: {
                disabledDate(time) {
                    //根据当前日期 --- 禁止选中之后的日期
                    return time.getTime() > Date.now();
                },
                onPick(time) {
                    that.$nextTick(() => {
                        // time.minDate -- 选中开始的时间
                        const start = new Date(time.minDate);
                        const end = new Date();
                        start.setTime(start.getTime() + 3600 * 1000 * 24 * 7);
                        end.setTime(end.getTime());
                        // 先清空在赋值
                        that.form.timeData = [];
                        if (end.setTime(end.getTime()) < start.setTime(start.getTime())) {
                            that.form.timeData[0] = time.minDate;
                            that.form.timeData[1] = end;
                        } else {
                            that.form.timeData[0] = time.minDate;
                            that.form.timeData[1] = start;
                        }
                    });
                    // 关闭--时间控件下拉框
                    that.$refs.timeBox.handleClose();
                }
            }
        };
    },
    methods: {
        // 日期转换 -- 年月日 
        formatDate(item) {
            if (item != null) {
                var datetime = new Date(item);
                var year = datetime.getFullYear();
                var month = datetime.getMonth() + 1; //js从0开始取
                var date = datetime.getDate();

                if (month < 10) {
                    month = '0' + month;
                }
                if (date < 10) {
                    date = '0' + date;
                }
                var time = year + '-' + month + '-' + date 

                return time;
            }
            return '';
        }
    }
};
</script>
<style scoped></style>