jQuery Datepicker 如何突出显示 ui-datepicker-current-day 和另一个当前悬停的日期之间的所有日期？答案

【问题标题】：jQuery Datepicker how to highlight all dates between ui-datepicker-current-day and another currently hovered date?jQuery Datepicker 如何突出显示 ui-datepicker-current-day 和另一个当前悬停的日期之间的所有日期？
【发布时间】：2015-07-20 10:34:03
【问题描述】：

jQuery UI datepicker 小部件在悬停日期时会自动将类 ui-state-hover 添加到日期。但是我如何配置将此类添加到具有类 ui-datepicker-current-day 的元素和当前悬停的具有类 ui-state-hover 的元素之间的每个日期？

【问题讨论】：

标签： jquery css jquery-ui-datepicker

【解决方案1】：

这确实是一个棘手的问题:)
我们在这里遇到的问题是datepicker 中没有afterShow 的回调。我找到了解决方案here 并做了一些改进：

    function initDatePickerMarkup(e) {
    $(e)
        .datepicker('widget').find('td').mouseover(function() {
            currentDate = new Date($(this).attr('data-year')+"/"+(parseInt($(this).attr('data-month'))+1)+"/"+$(this).text());
            selectedDate = $(e).datepicker('getDate');
            if (selectedDate === null) {
                selectedDate = new Date();
            }
            allTds = $(this).parents('table.ui-datepicker-calendar').find('td');
            allTds.removeClass('ui-datepicker-mouseover1')
            found = false;
            if (currentDate < selectedDate) {
                for (i = 0; i < allTds.length; i++) {
                    if (allTds[i] == this) {
                        found = true;
                    }
                    if ($(allTds[i]).hasClass('ui-datepicker-today') || $(allTds[i]).hasClass('ui-datepicker-current-day')) {
                        break;
                    }
                    if (found) {
                        $(allTds[i]).addClass('ui-datepicker-mouseover1');
                    }
                }
            } else if (currentDate > selectedDate) {
                for (i = 0; i < allTds.length; i++) {
                    if (found) {
                        $(allTds[i]).addClass('ui-datepicker-mouseover1');
                    }
                    if ($(allTds[i]).hasClass('ui-datepicker-today') || $(allTds[i]).hasClass('ui-datepicker-current-day')) {
                        found = true;
                    }
                    if (allTds[i] == this) {
                        break;
                    }
                }
            }
        });
}
$(function() {
    $.datepicker._updateDatepicker_original = $.datepicker._updateDatepicker;
    $.datepicker._updateDatepicker = function(inst) {
        $.datepicker._updateDatepicker_original(inst);
        var afterShow = this._get(inst, 'afterShow');
        if (afterShow) {
            afterShow.apply((inst.input ? inst.input[0] : null));  // trigger custom callback
        }
    }
    $( "#datepicker" ).datepicker({
        afterShow: function(e) {
            initDatePickerMarkup(this);
        }
    });
});

.ui-datepicker-mouseover1 {
    border: 1px solid red !important;
}

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>datepicker demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<input id="datepicker" />
</body>
</html>

希望对你有帮助

【讨论】：