在使用laydate的mark标记时,当切换时间修改mark值总是不能及时更新,官方提供的chang事件总是在页面挂载之后调用,导致数据不能及时更新。因此,我在网上找了一下解决方案,有位大神给出了添加beforechange事件的解决方案:
第一步:修改laydate.js 一共需要修改两个地方
1.找到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"))
}
}`
2.找到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.listYMt = r, l && (n["startDate", "endDate"].year = r), n.list("month", t)))
: (n.range || n.done(null, "beforeChange"),
n.checkDate("limit").calendar(),
n.closeList()),
n.setBtnStatus(),`
步骤二:在js中直接使用beforeChange即可
laydate.render({
elem: '#test18'
,trigger: 'click'
,mark: {}
,beforeChange: function(value, date, endDate){
//console.log('beforeChange')
}
)}
不过我又遇到一个问题,那就是切换月份后没有重新选择日期关闭后,再次点击显示日期,当前选择的这个月份的mark没有渲染,是空的,经过一番查找,最终通过change方法实现了
,change: function(value, date, endDate){
console.log('change');
setMonthDate(this.value);
}
,done: function(value, date){
console.log('done');
setMonthDate(value);
}
function setMonthDate(value){
//这里面ajax实时获取数据后重新设置mark值
var obj = {};
console.log(obj)
myLaydate.config.mark = obj;
}
————————————————
原文链接:https://blog.csdn.net/zj14224...