When using laydate, if you encounter some problems and framework bug s, make a record here and improve the solutions (if any) 😄)， Because I am not a professional front-end, the methods I may propose are not very good, but some are better than none.

My environment

• System: MacOS catalina10 fifteen point six
• Browser: Chrome 87.0.4280.88
• Layui version: 2.3.0

Problems encountered during use

The date selection box does not pop up

When the date control is bound to the input box element, the default trigger event is: focus, there will be some trigger bugs, and it can be changed to trigger:'click' during rendering

If the bound element is not an input box, the default event is: click

Problems when type = "month"

Type = "month" has encountered several problems, mainly because the logic of some places is different from the default type = "date".

The change event is invalid when range selection is turned on

laydate.render({
  elem: '#test1 ', / / specify the element
  type:'month',
  range:'～',
  change:function(value,date,endDate){
    console.log(value)
  }
});

After testing, when type:'month' is annotated, the change event takes effect, and when range: '~' is annotated, the change event takes effect. Strangely, when both are annotated, change does not take effect. After selecting the date, the selected date will be automatically filled and the pop-up window will be closed. However, when type='month ', the selected month will not be automatically filled and closed. You need to click the OK button Realistic needs

There is a demand here for two broken line data, and the abscissa is month. In order to avoid the disorder of the order of two identical months and months, I adopted the method of restricting cross year. However, if the change event is invalid, the date range cannot be limited. Although the data can be rendered according to whether the date meets the conditions in the done event, the new date will be filled in automatically as soon as you click the OK button, and it is impossible to re assign the value in done. At the same time, I also tried to write click events to limit the month not to cross a year, but it doesn't take effect, even if I use $(document) On ("click", selector, function () {}) is a method for dynamically generating element binding events

Solution

The first method is to select the date range without using a date selection box, divide the range selection into two date selections, and then dynamically change the selection range of the end date according to the start date min,max Value.
var startTime=laydate.render({
     elem: '#hqsjStart'
     ,trigger:'click'
     ,done:function (value,date) {
         endTime.config.min={
             year:date.year,
             month:date.month-1,//crux
             date:date.date
         };
     }
 });
 var endTime=laydate.render({
     elem: '#hqsjEnd'
     ,trigger:'click'
     ,done:function (value,date) {
         startTime.config.max={
             year:date.year,
             month:date.month-1,//crux
             date:date.date
         };
     }
 });

1. I didn't use this method because there are too many selection boxes. In this requirement, it has to be changed into four selection boxes, and the continuity of operation is not so strong. If there is only one range selection, it can be used.

The second method is to modify laydate.js The idea is as follows: after the date is switched, judge whether it is the same year. If not, disable the OK button and give a prompt. The modified code is as follows, which is added at the position of line 694 of the source code (after the source code is formatted)
 }, T.prototype.setBtnStatus = function(e, t, n) {
     var a, i = this,
         r = i.config,
         o = w(i.footer).find(g),
         d = r.range && "date" !== r.type && "time" !== r.type;
     d && (t = t || i.startDate, n = n || i.endDate, a = i.newDate(t).getTime() > i.newDate(n).getTime(), i.limit(null, t) ||
     i.limit(null, n) ? o.addClass(s) : o[a ? "addClass" : "removeClass"](s), e && a && i.hint("string" == typeof e ? l
         .replace(/date/g, e) : l))
     //Here is the added code. In order to avoid affecting other pages, path judgment is added, which only takes effect for specific pages
     if (location.pathname == "/smsly/mgt/ticketAnalysis" && r.range && r.type == "month") {
         if (i.startDate.year != i.endDate.year) {
             o.addClass(s)
             i.hint("Please select the month of the same year")
             l="Please select the month of the same year"
         } else {
             o.removeClass(s)
         }
     }

The effect is as follows:

It is not recommended to directly change the source code. I tried many methods and failed to solve them before I changed the source code. I will continue to update this article when I encounter problems later