Question

我正在尝试在jQuery UI datepicker中添加“当前周”指标。我有一个自定义事件，在显示datepicker后触发。它的一半有效，但是当快速上下移动时会出现一些延迟（即使悬停类被清除）。我不知道为什么在鼠标离开行后，边框仍然应用于tr。

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

你可以用css实现你想要的东西，你就不会有这个问题，在这种情况下不需要js

请参阅代码段：

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

ui-datepicker中活动行的悬停状态

1 个答案: