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>


评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值