这个例子几乎是我想要实现的目标：
http://hackingon.net/files/jquery_datepicker/range.htm

唯一的区别是所选范围的突出显示应该发生在两个单独的日期选择器和鼠标悬停上.

有什么建议？

更新：

好的,更多细节：

从第一个日期选择器中选择日期后,第二个日期选择器应突出显示上一个选定日期.如果您将鼠标移过上一个选定日期后的一天,则两者之间的所有日期都应通过添加类来突出显示.

更新：
这是我得到了多远：

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

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

            $("#ui-datepicker-div td").live({
                mouseenter: function() {
                    $(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                },mouseleave: function() {
                    $("#ui-datepicker-div td").removeClass("highlight");
                }
            });

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

http://jsfiddle.net/mayko/WbWg3/1/

唯一的问题是,直播事件只是突出显示当前悬停行的td,而不是前面行的td.

有任何想法吗？

解决方法

$("#input-service_date_leave,});

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

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

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

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

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

• 上一篇：jquery选择除div及其子元素之外的所下一篇：在页面加载时自动打开jQuery Color