Question

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

希望有所帮助

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

1 个答案: