Question

http://jsfiddle.net/K5upK/

我一直试图弄清楚如何在选定日期之前/之后的所有日子里点亮，但我似乎无法在悬停时获得表格单元格的背景颜色。我正在寻找的效果类似于www.kayak.com上的悬停功能。到目前为止我所做的工作让用户可以选择一个开始/结束日期，并用浅蓝色点亮它们之间的所有日子。我忘了做什么？这是代码：

的index.html：

<!doctype html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel='stylesheet' href='jquery-ui-1.10.3/themes/base/jquery-ui.css'></link>
    <script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
    <script src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
    <script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
    <script src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
    <link rel='stylesheet' href='css/main.css'>

    <title>Demo</title>
</head>
<body>

    <div class="datepicker">
        Dates:
        <label><b>To:</b></label>
        <input type="text" id="input1" size="10">
            <label><b>From:</b></label>
        <input type="text" id="input2" size="10">

    </div>

    <script src="js/main.js"></script> 
</body>
</html>

main.js

$( document ).ready(function() {
    $(".datepicker").datepicker({
        showOtherMonths: false,
        minDate: 0,
        numberOfMonths: 2,

        beforeShowDay: function(date) {
            var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
            var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
            var className;


            if (startDate && (date.getTime() == startDate.getTime())) {
                className = "start-date"
            }
            else if (endDate && (date.getTime() == endDate.getTime())) {
                className = "end-date";
            }
            else if ((startDate && endDate) && (startDate < date && date < endDate)) {
                className = "between-date";
            }
            else {
                className = "";
            }

            return [true, className];
        },
        onSelect: function(dateText, inst) {
            var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
            var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
            var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);


            if (!startDate || endDate) {
                $("#input1").val(dateText);
                $("#input2").val("");
                $(this).datepicker();
            } else if( selectedDate < startDate ) {
                $("#input2").val( $("#input1").val() );
                $("#input1").val( dateText );
                $(this).datepicker();
            } else {
                $("#input2").val(dateText);
                $(this).datepicker();
            }
        }
    });

    $('.datepicker').on('mouseenter', 'td a', function() {
        console.log('in mouseenter');
        var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());

        if (startDate) {
            var cell = $(this);
            cell.addClass('between-date');            
            console.log(cell);
        }

    })
});

的main.css

.start-date .ui-state-default, .end-date .ui-state-default {
    background: #0000FF;
    color: #FFFFFF;
}

.between-date .ui-state-default {
    background: #9999FF;
}

Answer 1

我一直在寻找相同的东西但是在上面的例子中，突出显示仅在选择两个日期之后发生。我希望在选择第一个日期并悬停任何其他日期后，突出显示在所有日期之间。我修改了你的jsfiddle，这是我的悬浮工作的解决方案：

http://jsfiddle.net/K5upK/32/

$( document ).ready(function() {
$(".datepicker").datepicker({
    showOtherMonths: false,
    minDate: 0,
    numberOfMonths: 2,
    beforeShowDay: function(date) {
        var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        var className;

        if (startDate && (date.getTime() == startDate.getTime())) {
            className = "start-date"
        }
        else if (endDate && (date.getTime() == endDate.getTime())) {
            className = "end-date";
        }
        else if ((startDate && endDate) && (startDate < date && date < endDate)) {
            className = "between-date";
        }
        else {
            className = "";
        }

        return [true, className];
    },
    onSelect: function(dateText, inst) {
        var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
        var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
        var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

        if (!startDate || endDate) {
            $("#input1").val(dateText);
            $("#input2").val("");
            $(this).datepicker();
        } else if( selectedDate < startDate ) {
            $("#input2").val( $("#input1").val() );
            $("#input1").val( dateText );
            $(this).datepicker();
        } else {
            $("#input2").val(dateText);
            $(this).datepicker();
        }
    }
});

$('.datepicker').on('mouseenter', 'td a', function() {
    $(".between-date").removeClass("between-date"); // reset
    isBetween = false;
    foundFirst = 0;
    calendar = $(this).closest('.ui-datepicker');
    if(calendar.find('.start-date').length > 0 && calendar.find('.end-date').length == 0) {
        calendar.find('.ui-state-default').each(function() {
            if($(this).hasClass("ui-state-active")) {
                if(foundFirst==0) foundFirst=-1;
                isBetween = (foundFirst == -1 ? true : false);
            }
            if($(this).hasClass("ui-state-hover")) {
                if(foundFirst==0) foundFirst=1;
                isBetween = (foundFirst == 1 ? true : false);
            }
            if(isBetween) {
                $(this).addClass("between-date");
            } 
        });
    }
})

}）;

Answer 2

我这样做是为了突出某个范围内的具体日子......

function loadDatepickers(){
   var fromDate = new Date($(".lblDateFrom").text());
   var toDate = new Date($(".lblDateTo").text());

   ....
   },
    beforeShowDay: function(date){
     if (date >= fromDate && date <= toDate) {
       return [true, 'ui-individual-date', '']; //css class that applies the highlighting to each date
     }
     else {
       return [true, '', ''];
     }
   }),

....
// in css file
.ui-individual-date {
background-color: #F2F5F7;

}

JQuery UI Datepicker - 如何突出显示鼠标悬停时选定日期之前/之后的天数？

2 个答案: