jQuery UI Datepicker - 日期范围 - 突出显示两者之间的天数 [英] jQuery UI Datepicker - Date range - Highlight days in between

问题描述

我正在寻找一种方法，可以在鼠标悬停时突出显示介于两者之间的日期 2 个输入的日期范围.

I'm looking for a way of highlighting the days in between the date range of 2 inputs on mouse over.

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

This example is nearly doing what I want to achieve: http://hackingon.net/files/jquery_datepicker/range.htm

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

Only difference is that the highlighting of the selected range should happen on two separate datepickers and on mouse over.

有什么建议吗?

更新:

好的，再详细一点:

从第一个日期选择器中选择日期后，第二个日期选择器应突出显示前一个选定的日期.如果您随后将鼠标悬停在前一天之后的一天，则中间的所有天都应通过添加一个类来突出显示.

After selecting a date from the first datepicker, the second datepicker should highlight the previous selected date. If you then mouse over a day past the previous selected day, all days in between should highlight by adding a class.

更新:这是我走了多远:

Update: This is how far I got:

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

Only problem, the live event just highlights the td's of the current hovered row, but not the td's of the rows before.

有什么想法吗?

推荐答案

我在您的脚本中添加了一些内容.在 JSFiddle 上工作得很好.看一看让我知道.

I added a bit to your script. Worked like a charm on JSFiddle. Take a look and let me know.

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

这篇关于jQuery UI Datepicker - 日期范围 - 突出显示两者之间的天数的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！