jQuery UI 日期选择器 - 突出显示 depart/arrive 日期之间的天数

Question

我试图突出显示 depart/arrive 日期之间的天数。我找到了一个与我希望的相匹配的例子，但它只适用于 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

这是您的函数 "adapted" 来自已弃用的 .live() 方法。
我使用 jquery 2.2.0、2.2.4 和 3.1.1（最新）对其进行了测试。

它看起来与 this CodePen 中的 fiddle 行为相同。

Datepicker 在尝试查找 td 集合（日期）之前绘制 table（日历）似乎需要 50 毫秒的小延迟，即使尚不可见。

$("#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);
    }
}

jQuery UI 日期选择器 - 突出显示 depart/arrive 日期之间的天数

jQuery UI Datepicker - Highlight days in between depart/arrive date

jquery

jquery-ui

jquery-ui-datepicker