Question

我试图强调出发/到达日期之间的天数。我找到了一个符合我的意愿的例子，但它只与jQuery 1.7一起使用。我使用jQuery 2.x并且此版本不支持live功能，我尝试使用on代替live，但它无效。这是my Fiddle。你可以看到它适用于jQuery 1.7。

＆＃13;

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

＆＃13;

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

＆＃13;

<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">

＆＃13;

Answer 1

以下是您弃用的.live()方法中的“改编”功能我使用jquery 2.2.0，2.2.4和3.1.1（最新）对其进行了测试。

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

在尝试查找td集合（日期）之前，Datepicker需要一个小的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);
    }
}

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

1 个答案: