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

user1014412 Published at Dev

user1014412

The jQuery UI datepicker widget automatically adds a class ui-state-hover to a date when hovering it. But how can i configure to add this class to every date between the element having class ui-datepicker-current-day and the currently hovered element having class ui-state-hover?

Dekel

This indeed was a tricky one :)
The problem we got here is that there isn't a callback for afterShow in the datepicker. I found a solution here and did some enhancements:

    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>

Hope it helps

Collected from the Internet

Please contact [email protected] to delete if infringement.