jQuery UI日期选择器 - 日期范围 - 突出显示两个日期之间的日子

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。

有什么想法吗？

- Mayko

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');
            }
        }
    }

- CodeMonkeyG

---

还有一件事，你能帮忙更新一下，让它跨越到下个月吗？我在选择器中显示了两个月。谢谢！ - Marvzz

@Marvzz 我添加了一个答案，其中包括一个脚本，可以使用多个月份来执行它。 - Aryeh Armon

Answer 2

编辑：这段脚本不能在jquery 3上使用，但可以在版本1和2上使用。 这个JSFiddle是使用两个日期表（多个月）的示例。

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

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").parents('.ui-datepicker-group-last').parent().find('.ui-datepicker-group-first').find('tr').last().addClass("finalRowRangeOtherTable");
                $(".finalRowRangeOtherTable").find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                $(".finalRowRangeOtherTable").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");

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

                  $(".finalRowRange").removeClass("finalRowRange").find('.highlight').removeClass("highlight");
            $(".finalRowRangeOtherTable").removeClass("finalRowRangeOtherTable").find('.highlight').removeClass("highlight");

            }
        });

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

- Aryeh Armon

---

请有人将它迁移到jQuery 3。 - Abhishek Saini

@AbhishekSaini 应该使用 jQuery 3 进行开发，不过还没有测试。这里有哪些函数在 jq3 中已经被弃用了？ - Aryeh Armon

不行，不起作用。live()和die()已经在jQuery 3中被淘汰了。 - Abhishek Saini

Answer 3

在这里为内联日期选择器制作了一个日期范围悬停的示例： http://codepen.io/denissamoilov/pen/RGKyPb?editors=0010

$(function(){
    var datepicker = {
        container: $("#datepicker"),
        dateFormat: 'mm/dd/yy',
        dates: [null, null],
        status: null,
        inputs: {
            checkin: $('#checkin'),
            checkout: $('#checkout'),
            dates: $('#dates')
        }
    };

    datepicker.container.datepicker({
        numberOfMonths: 2,
        dateFormat: datepicker.dateFormat,
        minDate: 0,
        maxDate: null,

        beforeShowDay: function(date) {
            var highlight = false,
            currentTime = date.getTime(),
            selectedTime = datepicker.dates;

            // Highlight date range
            if ((selectedTime[0] && selectedTime[0] == currentTime) || (selectedTime[1] && (currentTime >= selectedTime[0] && currentTime <= selectedTime[1]))) highlight = true;

            return [true, highlight ? 'ui-datepicker-select' : ""];
        },
        onSelect: function(dateText) {

            if (!datepicker.dates[0] || datepicker.dates[1] !== null) {
                // CHOOSE FIRST DATE

                // fill dates array with first chosen date
                datepicker.dates[0] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime();
                datepicker.dates[1] = null;

                // clear all inputs
                datepicker.inputs.checkin.val('');
                datepicker.inputs.checkout.val('');
                datepicker.inputs.dates.val('');

                // set current datepicker state
                datepicker.status = 'checkin-selected';

                // create mouseover for table cell
                $('#datepicker').delegate('.ui-datepicker td', 'mouseover', function(){

                    // if it doesn't have year data (old month or unselectable date)
                    if ($(this).data('year') == undefined) return;

                    // datepicker state is not in date range select, depart date wasn't chosen, or return date already chosen then exit
                    if (datepicker.status != 'checkin-selected') return;

                    // get date from hovered cell
                    var hoverDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html();

                    // parse hovered date into milliseconds
                    hoverDate = $.datepicker.parseDate('yy-mm-dd', hoverDate).getTime();

                    $('#datepicker td').each(function(){

                        // compare each table cell if it's date is in date range between selected date and hovered
                        if ($(this).data('year') == undefined) return;

                        var year = $(this).data('year'),
                            month = $(this).data('month'),
                            day = $('a', this).html();

                        var cellDate = $(this).data('year')+'-'+($(this).data('month')+1)+'-'+$('a',this).html();

                        // convert cell date into milliseconds for further comparison
                        cellDate = $.datepicker.parseDate('yy-mm-dd', cellDate).getTime();

                        if ( (cellDate >= datepicker.dates[0] && cellDate <= hoverDate) || (cellDate <= datepicker.dates[0] && cellDate >= hoverDate) ) {
                            $(this).addClass('ui-datepicker-hover');
                        } else {
                            $(this).removeClass('ui-datepicker-hover');
                        }

                    });
                });

            } else {
                // CHOOSE SECOND DATE

                // push second date into dates array
                datepicker.dates[1] = $.datepicker.parseDate(datepicker.dateFormat, dateText).getTime();

                // sort array dates
                datepicker.dates.sort();

                var checkInDate = $.datepicker.parseDate('@', datepicker.dates[0]);
                var checkOutDate = $.datepicker.parseDate('@', datepicker.dates[1]);

                datepicker.status = 'checkout-selected';

                //fill input fields

                datepicker.inputs.checkin.val($.datepicker.formatDate(datepicker.dateFormat, checkInDate));
                datepicker.inputs.checkout.val($.datepicker.formatDate(datepicker.dateFormat, checkOutDate)).change();

                datepicker.inputs.dates.val(datepicker.inputs.checkin.val() + ' - ' + datepicker.inputs.checkout.val());

            }
        }
    });
});

- samoilov