jQuery UI Datepicker - 突出显示出发/到达日期之间的天数答案

【问题标题】：jQuery UI Datepicker - Highlight days in between depart/arrive datejQuery UI Datepicker - 突出显示出发/到达日期之间的天数
【发布时间】：2016-11-01 03:11:41
【问题描述】：

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

【问题讨论】：

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案1】：

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

看起来和this CodePen 中的小提琴一样。

在尝试查找 td 集合（日期）之前，Datepicker 绘制表格（日历）似乎需要 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);
    }
}

【讨论】：