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); 
    } 
}