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.

任何建议？

更新：

好的，更多的细节：

从第一个datepicker选择一个日期后，第二个datepicker应该突出显示上一个选定的日期。如果您将鼠标悬停在上一个选定日期之前的一天之内，则应通过添加课程来突出显示所有日期。

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屋！