LCalendar.js注册回调监听函数

Scroll Down

TOC

首先把代码下载下来然后进行格式化,因为下载下来的代码会默认压缩,

修改构造方法

修改构造方法

if (this.type = t.type, this.trigger = document.querySelector(t.trigger), null != this.trigger.getAttribute("data-lcalendar"),
//这里加入了一个回调函数
            t.submitCallBack && t.submitCallBack != null, this.submitCallBack = t.submitCallBack) {
                let t = this.trigger.getAttribute("data-lcalendar").split(","), e = t[0].split("-");
                this.minY = ~~e[0], this.minM = ~~e[1], this.minD = ~~e[2];
                let i = t[1].split("-");
                this.maxY = ~~i[0], this.maxM = ~~i[1], this.maxD = ~~i[2]
            }

调试并修改绑定事件

然后我们经过打断点调试到选择完日期之后确认会调用bind方法,即下图
绑定事件

定位源码

这里就是用户在点击确定按钮的时候触发的,可以通过页面源码来找到,
页面源码

修改回调事件

然后定位并找到confirm,然后将对刚刚注册的回调函数加入下面的代码

confirm(t) {
            return e => {
                let i, a, r, s, n, d, l = this.gearDate.querySelector(".date_yy"),
                    o = this.gearDate.querySelector(".date_mm");
                l && (i = this.maxY - this.minY + 1, a = parseInt(Math.round(l.getAttribute("val"))), r = parseInt(Math.round(o.getAttribute("val"))) + 1, r = r > 9 ? r : "0" + r);
                let h = this.gearDate.querySelector(".date_dd");
                h && (s = parseInt(Math.round(h.getAttribute("val"))) + 1, s = s > 9 ? s : "0" + s);
                let m = this.gearDate.querySelector(".time_hh"), u = this.gearDate.querySelector(".time_mm");
                m && (n = parseInt(Math.round(m.getAttribute("val"))), n = n > 9 ? n : "0" + n, d = parseInt(Math.round(u.getAttribute("val"))), d = d > 9 ? d : "0" + d), this.trigger.value = `${a >= 0 ? a % i + this.minY : ""}${r ? "-" + r : ""}${s ? "-" + s : ""}${s && n ? " " : ""}${n ? "" + ((n.length < 2 ? "0" : "") + n + (d.length < 2 ? ":0" : ":") + d) : ""}`, t(e)
                //加入下面这一句,如果当前存在回调函数,即点击确定之后要调用这个函数
                if (this.submitCallBack && this.submitCallBack != null) {
                    console.log('回调成功:', this.trigger.value);
                    this.submitCallBack(this.trigger.value)
                }
            }
        }

使用

var calendar = new LCalendar();
    calendar.init({
        'trigger': '#followDate',//标签id
        'type': "date",//date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择
        'minDate':"2020-09-01",//最小日期 注意:该值会覆盖标签内定义的日期范围
        'maxDate':'2050-01-01',//最大日期 注意:该值会覆盖标签内定义的日期范围
        'submitCallBack':function(value){ //回调
            //执行你触发确定按钮的逻辑
        }
    });
	

取消按钮的触发类似注册函数哦!都是通过修改源码事件来达到目的,最后感谢 LCalendar作者的开源