jQuery UI Datepicker - 出发日期之间的突出显示日期

Question

我试图强调出发日期/到达日期之间的日期。我找到了一个符合我希望的例子，但它只能用于jQuery 1.7。我正在使用jQuery 2.x和live功能在此版本中不受支持，我试图使用on而不是live，但它不起作用。这里是my Fiddle。你可以看到它适用于jQuery 1.7。

$("#depart, #arrive").datepicker({  
 
     beforeShow: customRange, 
 
    }); 
 

 
    function customRange(input) { 
 
     if (input.id == "arrive") { 
 

 
      $("#ui-datepicker-div td").live({ 
 
       mouseenter: function() { 
 
        $(this).parent().addClass("finalRow"); 
 
        $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
 
        $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
 
       }, 
 
       mouseleave: function() { 
 
        $(this).parent().removeClass("finalRow"); 
 
        $("#ui-datepicker-div td").removeClass("highlight"); 
 
       } 
 
      }); 
 
     } 
 
    }

.highlight {background-color: #b0d7ed !important;}

<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> 
 
Depart: <input type="text" id="depart"> <br> 
 
Arrive: <input type="text" id="arrive">

Answer 1

这里是你的函数“改编”从已过时.live()方法。
我用jquery 2.2.0，2.2.4和3.1.1（最新）对它进行了测试。

它看起来像你的小提琴一样在this CodePen。

对于Datepicker来说，在尝试查找td集合（日期）之前，绘制表（日历）（即使尚不可见）需要50ms的小延时。

$("#depart, #arrive").datepicker({  
    beforeShow: function(){ 
     customRange($(this).attr("id")); 
    } 
}); 

function customRange(input) { 

    if (input == "arrive") { 

     setTimeout(function(){ 
      var calendarTD = $("#ui-datepicker-div").find("td"); 

      calendarTD.on("mouseenter", function(){ 
       $(this).parent().addClass("finalRow"); 
       $(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
       $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight"); 
      }); 
      calendarTD.on("mouseleave",function() { 
       $(this).parent().removeClass("finalRow"); 
       $("#ui-datepicker-div td").removeClass("highlight"); 
      }); 
     },50); 
    } 
}