我正在寻找一种方法来突出鼠标悬停时2个输入日期范围之间的日子.
这个例子几乎是我想要实现的目标：
http://hackingon.net/files/jquery_datepicker/range.htm
唯一的区别是所选范围的突出显示应该发生在两个单独的日期选择器和鼠标悬停上.
有什么建议？
更新：
好的,更多细节：
从第一个日期选择器中选择日期后,第二个日期选择器应突出显示上一个选定日期.如果您将鼠标移过上一个选定日期后的一天,则两者之间的所有日期都应通过添加类来突出显示.
更新：
这是我得到了多远：
$("#input-service_date_leave,#input-service_date_return").datepicker({
rangeSelect: true,beforeShow: customRange,onSelect: customRange,});
function customRange(input) {
if (input.id == "input-service_date_leave") {
$("#ui-datepicker-div td").die();
if (selectedDate != null) {
$('#input-service_date_return').datepicker('option','minDate',selectedDate).datepicker('refresh');
}
}
if (input.id == "input-service_date_return") {
$("#ui-datepicker-div td").live({
mouseenter: function() {
$(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
},mouseleave: function() {
$("#ui-datepicker-div td").removeClass("highlight");
}
});
var selectedDate = $("#input-service_date_leave").datepicker("getDate");
if (selectedDate != null) {
$('#input-service_date_return').datepicker('option',selectedDate).datepicker('refresh');
}
}
}
http://jsfiddle.net/mayko/WbWg3/1/
唯一的问题是,直播事件只是突出显示当前悬停行的td,而不是前面行的td.
有任何想法吗？
解决方法
我在你的脚本中添加了一些内容.在
JSFiddle上工作就像一个魅力.看看,让我知道.
$("#input-service_date_leave,});
function customRange(input) {
if (input.id == "input-service_date_leave") {
$("#ui-datepicker-div td").die();
if (selectedDate != null) {
$('#input-service_date_return').datepicker('option',selectedDate).datepicker('refresh');
}
}
if (input.id == "input-service_date_return") {
$("#ui-datepicker-div td").live({
mouseenter: function() {
$(this).parent().addClass("finalRow");
$(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
$(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
},mouseleave: function() {
$(this).parent().removeClass("finalRow");
$("#ui-datepicker-div td").removeClass("highlight");
}
});
var selectedDate = $("#input-service_date_leave").datepicker("getDate");
if (selectedDate != null) {
$('#input-service_date_return').datepicker('option',selectedDate).datepicker('refresh');
}
}
}
