【发布时间】：2014-01-08 19:36:49
【问题描述】：
我一直在试图弄清楚如何在选定日期之前/之后的所有日子里保持高亮，但我似乎无法让表格单元格的背景颜色在悬停时发生变化。我正在寻找的效果类似于 www.kayak.com 上的悬停功能。到目前为止，我所做的工作让用户可以选择开始/结束日期，并且它会以浅蓝色点亮所有日子。我忘了做什么？代码如下：
index.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link rel='stylesheet' href='jquery-ui-1.10.3/themes/base/jquery-ui.css'></link>
<script src="jquery-ui-1.10.3/jquery-1.9.1.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery-ui.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.core.js"></script>
<script src="jquery-ui-1.10.3/ui/jquery.ui.datepicker.js"></script>
<link rel='stylesheet' href='css/main.css'>
<title>Demo</title>
</head>
<body>
<div class="datepicker">
Dates:
<label><b>To:</b></label>
<input type="text" id="input1" size="10">
<label><b>From:</b></label>
<input type="text" id="input2" size="10">
</div>
<script src="js/main.js"></script>
</body>
</html>
main.js
$( document ).ready(function() {
$(".datepicker").datepicker({
showOtherMonths: false,
minDate: 0,
numberOfMonths: 2,
beforeShowDay: function(date) {
var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
var className;
if (startDate && (date.getTime() == startDate.getTime())) {
className = "start-date"
}
else if (endDate && (date.getTime() == endDate.getTime())) {
className = "end-date";
}
else if ((startDate && endDate) && (startDate < date && date < endDate)) {
className = "between-date";
}
else {
className = "";
}
return [true, className];
},
onSelect: function(dateText, inst) {
var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
if (!startDate || endDate) {
$("#input1").val(dateText);
$("#input2").val("");
$(this).datepicker();
} else if( selectedDate < startDate ) {
$("#input2").val( $("#input1").val() );
$("#input1").val( dateText );
$(this).datepicker();
} else {
$("#input2").val(dateText);
$(this).datepicker();
}
}
});
$('.datepicker').on('mouseenter', 'td a', function() {
console.log('in mouseenter');
var startDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input1").val());
var endDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#input2").val());
if (startDate) {
var cell = $(this);
cell.addClass('between-date');
console.log(cell);
}
})
});
main.css
.start-date .ui-state-default, .end-date .ui-state-default {
background: #0000FF;
color: #FFFFFF;
}
.between-date .ui-state-default {
background: #9999FF;
}
【问题讨论】：
-
如果您可以创建一个工作 Jsfiddle，将更容易提供帮助。
-
我可以在 kayak.com 上看到效果，看来你明白了，你想在悬停时更改高亮，还是在前后几天？，要在悬停时更改高亮，只需覆盖 ui css, property is:'.ui-datepicker td:hover' , 前后天是你所做的事情的对立面，实际上是用漂亮的编写代码。
-
对，所以我希望我的鼠标当前所在的位置和开始日期之间的天数被高亮显示。例如，如果日期选择器当前显示一月/二月，我选择 [2014 年 1 月 9 日] 作为开始日期，并将鼠标悬停在 [2014 年 2 月 1 日]，我需要 1 月 9 日到 2 月之间的所有日期1 用'between-date' CSS 突出显示。我正在尝试覆盖鼠标输入，但我似乎无法正确理解逻辑。
标签： javascript jquery html css jquery-ui-datepicker