小编May*_*yko的帖子

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

我正在寻找一种方法来突出鼠标悬停时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');
            }
        }
    }
Run Code Online (Sandbox Code Playgroud)

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

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

jquery jquery-ui highlighting datepicker date-range

7
推荐指数
1
解决办法
2万
查看次数

标签 统计

date-range ×1

datepicker ×1

highlighting ×1

jquery ×1

jquery-ui ×1