在使用laydate的mark管理日程时,当切换时间修改mark值总是不能及时更新,官方提供的chang事件总是在页面挂载之后调用,导致数据不能及时更新。因此,我在网上找了一下解决方案,有位大神给出了添加beforechange事件的解决方案,但是此方法只在上下切换时生效,直接选择时间时不生效。下面贴出我自己的解决方法:
步骤一:修改laydate.js
找到T.prototype.change事件,将其return更换为
return { prevYear: function() { s("sub") || (a.year--, n.range || t.done(null, "beforeChange"), t.checkDate("limit").calendar(), n.range || t.done(null, "change")) }, prevMonth: function() { var e = t.getAsYM(a.year, a.month, "sub"); w.extend(a, { year: e[0], month: e[1] }), n.range || t.done(null, "beforeChange"), t.checkDate("limit").calendar(), n.range || t.done(null, "change") }, nextMonth: function() { var e = t.getAsYM(a.year, a.month); w.extend(a, { year: e[0], month: e[1] }), n.range || t.done(null, "beforeChange"), t.checkDate("limit").calendar(), n.range || t.done(null, "change") }, nextYear: function() { s() || (a.year++, n.range || t.done(null, "beforeChange"), t.checkDate("limit").calendar(), n.range || t.done(null, "change")) } }
找到T.prototype.list,将n.range || n.done(null, "change")语句的前一段修改为:
"year" === a.type || "month" === a.type ? (w(d).find("." + o).removeClass(o), w(this).addClass(o), "month" === a.type && "year" === e && (n.listYM[t][0] = r, l && (n[["startDate", "endDate"][t]].year = r), n.list("month", t))) : (n.range || n.done(null, "beforeChange"), n.checkDate("limit").calendar(), n.closeList()), // a.range || n.done(null, "change"), n.setBtnStatus(),
然后在beforeChange中调用数据请求和更新mark的方法(注意请求数据需要同步请求)
beforeChange:function (value, date) { _this.year = date.year; _this.month = date.month; _this.endDays = laydate.getEndDate(date.month, date.year); _this.changeCount = 'changed'; _this.selectRc(); _this.myLaydate.config.mark = _this.obj; },