layui 的laydate 动态改变mark值,change方法无效解决办法

在使用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...

你可能感兴趣的:(vue.js)