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

Question

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

Answer 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>

希望对您有所帮助

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

jQuery Datepicker how to highlight all dates between ui-datepicker-current-day and another currently hovered date?

css

jquery

jquery-ui-datepicker