use*_*412 1 css jquery jquery-ui-datepicker
jQuery UI datepicker小部件自动将类ui-state-hover添加到悬停它的日期.但是,如何配置将此类添加到具有类的元素ui-datepicker-current-day和具有类的当前悬停元素之间的每个日期ui-state-hover？
这确实是一个棘手的:)
我们这里得到的问题是,没有一个回调afterShow中datepicker.我在这里找到了一个解决方案并做了一些改进:
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>希望能帮助到你