Hover state for active row in ui-datepicker

Question

I'm trying to add a 'current week' indicator to the jQuery UI datepicker. I have a custom event which triggers after the datepicker is shown. It half works, but there's a sort of lag when moving up and down quickly (even though the hover class is cleared). I have no idea why the border is still applied to the trs after the mouse leaves the row.

function addCalendarHover(){
    $('.ui-datepicker-calendar').on('mousemove', 'tr', function () {
        $(this)
            .addClass('week-hover')
            .find('td a').addClass('ui-state-hover');
    });
    $('.ui-datepicker-calendar').on('mouseleave', 'tr', function () {
        $(this)
            .removeClass('week-hover')
            .find('td a').removeClass('ui-state-hover');
    });
}
// add 'afterShow' event for jQUI date picker
$.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
}
$('#date1').datepicker({
    changeMonth: true,
    changeYear: true,
        afterShow: function(date) {
            addCalendarHover(); 
        }
});

.ui-datepicker-calendar > tbody > tr {
    border: 1px solid white;
}
    .ui-datepicker-calendar > tbody > tr.week-hover {
        /*border: 1px solid #ffaf46;*/
        border: 1px solid #ffaf46;
    } 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1"/> <br/>

https://jsfiddle.net/Echilon/5y0wampc/

Answer 1

You can achieve what you want using just css, and you will not have that problem, no need for js in this case

See code snippet:

function addCalendarHover() {
  /* $('.ui-datepicker-calendar').on('mousemove', 'tr', function () {
        $(this)
            .addClass('week-hover')
            .find('td a').addClass('ui-state-hover');
    });
    $('.ui-datepicker-calendar').on('mouseleave', 'tr', function () {
        $(this)
            .removeClass('week-hover')
            .find('td a').removeClass('ui-state-hover');
    });*/
}
// add 'afterShow' event for jQUI date picker
$.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
}
$('#date1').datepicker({
  changeMonth: true,
  changeYear: true,
  afterShow: function(date) {
    addCalendarHover();
  }
});

.ui-datepicker-calendar>tbody>tr {
  border: 1px solid white;
}

.ui-datepicker-calendar>tbody>tr:hover td a:not(.ui-state-highlight) {
  
  font-weight: normal;
  color: #555555;
  border: 1px solid #999999;
}

.ui-datepicker-calendar>tbody>tr:hover td {
  border-top: 1px solid #ffaf46;
  border-bottom: 1px solid #ffaf46;
}

.ui-datepicker-calendar>tbody>tr:hover td:first-child {
  border-left: 1px solid #ffaf46;
}

.ui-datepicker-calendar>tbody>tr:hover td:last-child {
  border-right: 1px solid #ffaf46;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Date Picker on input field: <input type="text" id="date1" name="date1" /> <br/>