The laydate of layui dynamically changes the mark value, the change method is invalid

Posted Jun 26, 20202 min read

When using the laydate mark mark, when the switch time changes the mark value, it cannot always be updated in time. The official chang event is always called after the page is mounted, resulting in the data not being updated in time. Therefore, I found a solution on the Internet, and a great god gave a solution to add the beforechange event:

The first step:modify laydate.js There are two places to be modified

1. Find the T.prototype.change event and replace its return with
`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. Find T.prototype.list and modify the previous paragraph of the n.range || n.done(null, "change") statement to:
`"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(),`

Step 2:Just use beforeChange in js
laydate.render({
        elem:'#test18'
        ,trigger:'click'
        ,mark:{}
        ,beforeChange:function(value, date, endDate){
          //console.log('beforeChange')
        }
     )}

However, I encountered another problem, that is, after switching the month, there is no re-selection of the date. After closing, click again to display the date. The mark of the currently selected month is not rendered, it is empty. After some searching, it is finally realized by the change method.

,change:function(value, date, endDate){
  console.log('change');
  setMonthDate(this.value);
}
,done:function(value, date){
  console.log('done');
  setMonthDate(value);
}

function setMonthDate(value){
//Reset the mark value after obtaining the data in real time by ajax
    var obj = {};
    console.log(obj)
    myLaydate.config.mark = obj;
  }

Original link: https://blog.csdn.net/zj14224...