jQuery UI Datepicker - 日期范围 - 突出显示介于两者之间的天数

Question

我正在寻找一种方法来突出鼠标悬停时2个输入的日期范围之间的日子.

这个例子几乎可以实现我想要实现的目标: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', 'minDate', selectedDate).datepicker('refresh');
            }
        }
    }

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

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

有任何想法吗？

Answer 1

我在你的脚本中添加了一些内容.像JSFiddle上的魅力一样工作.看一看,让我知道.

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