1

次のコードとフィドル ( http://jsfiddle.net/sunnyday195/VMDyL/1/ ) があり、もちろん .live をサポートしていない最新バージョンの jquery を使用する必要があります。.on を使用すると、強調表示が機能しません。ここにjsコードがあります：

 $("#input-service_date_leave, #input-service_date_return").datepicker({
    rangeSelect: true,
    beforeShow: customRange,
    onSelect: customRange,
});

function customRange(input) {
    if (input.id == "input-service_date_leave") {

        $("#ui-datepicker-div td").off();

        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
    if (input.id == "input-service_date_return") {

        $("#ui-datepicker-div td").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");
           },
            mouseleave: function() {
                $(this).parent().removeClass("finalRow");
                $("#ui-datepicker-div td").removeClass("highlight");
            }
        });

        var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
        if (selectedDate != null) {
            $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
        }
    }
}
4

2 に答える 2

0

mouseenter http://api.jquery.com/mouseenter/および mouseleave http://api.jquery.com/mouseleave/イベントがあります。

したがって、これはうまくいくはずです（テストされていません）：

$("#input-service_date_leave, #input-service_date_return").datepicker({
                                                                         rangeSelect: true,
                                                                         beforeShow: customRange,
                                                                         onSelect: customRange
});

function customRange(input)
{
    if (input.id == "input-service_date_leave")
    {

       $("#ui-datepicker-div td").off();

       if (selectedDate != null)
       {
           $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
       }
    }
    if (input.id == "input-service_date_return")
    {

       $("#ui-datepicker-div td").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");
                                             }
                                 );
       $("#ui-datepicker-div td").mouseleave(function ()
                                            {
                                                $(this).parent().removeClass("finalRow");
                                                $("#ui-datepicker-div td").removeClass("highlight");
                                            }
                                 );

    var selectedDate = $("#input-service_date_leave").datepicker("getDate");                
    if (selectedDate != null)
    {
        $('#input-service_date_return').datepicker('option', 'minDate', selectedDate).datepicker('refresh');
    }
}
于 2013-10-24T17:18:33.490 に答える