Javascript JQueryUI日期选择器-如何在鼠标悬停时选择所选日期之前/之后的几天？
我一直在试图找出如何在选定日期之前/之后的所有天都高亮显示，但我似乎无法在悬停时更改表格单元格的背景色。我想要的效果类似于www.kayak.com上的悬停功能。到目前为止，我所做的工作允许用户选择开始/结束日期，它会在这段时间内以浅蓝色亮起。我忘记做什么了？代码如下： index.html：Javascript JQueryUI日期选择器-如何在鼠标悬停时选择所选日期之前/之后的几天？,javascript,jquery,html,css,jquery-ui-datepicker,Javascript,Jquery,Html,Css,Jquery Ui Datepicker,我一直在试图找出如何在选定日期之前/之后的所有天都高亮显示，但我似乎无法在悬停时更改表格单元格的背景色。我想要的效果类似于www.kayak.com上的悬停功能。到目前为止，我所做的工作允许用户选择开始/结束日期，它会在这段时间内以浅蓝色亮起。我忘记做什么了？代码如下： index.html： <!doctype html> <html> <head> <meta charset="utf-8" /> <link rel='s
<!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>
我这样做是为了突出一系列特定的日子
function loadDatepickers(){
var fromDate = new Date($(".lblDateFrom").text());
var toDate = new Date($(".lblDateTo").text());
....
},
beforeShowDay: function(date){
if (date >= fromDate && date <= toDate) {
return [true, 'ui-individual-date', '']; //css class that applies the highlighting to each date
}
else {
return [true, '', ''];
}
}),
....
// in css file
.ui-individual-date {
background-color: #F2F5F7;
函数装入器日期选择器（）{
var fromDate=新日期（$（“.lblDateFrom”）.text（）；
var toDate=新日期（$（“.lblDateTo”）.text（）；
....
},
beforeShowDay:功能（日期）{
如果（date>=fromDate&&date我在寻找相同的东西，但在上面的示例中，高亮显示仅在选择两个日期后出现。我希望高亮显示在选择第一个日期并悬停任何其他日期后直接显示在所有日期之间。我修改了JSFIDLE，这是我的解决方案，以使悬停生效：
$（文档）.ready（函数（）{
$（“.datepicker”）.datepicker({
showOtherMonths:错误，
minDate:0，
月数：2，
beforeShowDay:功能（日期）{
var startDate=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#input1”）.val（））；
var endDate=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#input2”）.val（））；
var类名；
if（startDate&（date.getTime（）==startDate.getTime（））{
className=“开始日期”
}
else if（endDate&&（date.getTime（）==endDate.getTime（））{
className=“结束日期”；
}
否则如果（（开始日期和结束日期）和（（开始日期<日期和日期<结束日期））{
className=“日期之间”；
}
否则{
className=“”；
}
返回[true，className]；
},
onSelect：函数（日期文本，inst）{
var startDate=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#input1”）.val（））；
var endDate=$.datepicker.parseDate（$.datepicker._defaults.dateFormat，$（“#input2”）.val（））；
var selectedDate=$.datepicker.parseDate（$.datepicker.\u defaults.dateFormat，dateText）；
如果（！开始日期|结束日期）{
$（“#输入1”）.val（日期文本）；
$（“#input2”）.val（“”）；
$（this.datepicker（）；
}否则如果（选择日期<开始日期）{
$（“#输入2”）.val（$（“#输入1”）.val（））；
$（“#输入1”）.val（日期文本）；
$（this.datepicker（）；
}否则{
$（“#输入2”）.val（日期文本）；
$（this.datepicker（）；
}
}
});
$（'.datepicker'）。on（'mouseenter'，'td a'，function（）{
$（“.between-date”）.removeClass（“between-date”）；//重置
isBetween=false；
foundFirst=0；
日历=$（this）.closest（'.ui日期选择器'）；
if（calendar.find（'.start date'）.length>0&&calendar.find（'.end date'）.length==0）{
calendar.find（'.ui state default'）。each（function（）{
if（$（this）.hasClass（“ui状态活动”））{
如果（foundFirst==0）foundFirst=-1；
isBetween=（foundFirst==-1？true:false）；
}
if（$（this）.hasClass（“ui状态悬停”））{
如果（foundFirst==0）foundFirst=1；
isBetween=（foundFirst==1？true:false）；
}
如果（介于两者之间）{
$（此）.addClass（“日期之间”）；
}
});
}
})
})如果你能创建一个工作的JSFIDLE，我将提供帮助。我可以在kayak.com上看到效果，似乎你已经了解了，你想在悬停时更改高亮显示，或者在几天之前和之后？要在悬停时更改高亮显示，只需覆盖ui css，属性是：'.ui datepicker td:hover'，在几天之前和之后都是你所做工作的机会，实际上是一个漂亮的书写代码。对，因此我希望鼠标当前所在位置和开始日期之间的天数高亮显示。例如，如果日期选择器当前显示1月/2月，我选择[2014年1月9日]作为开始日期，我将鼠标悬停在[2014年2月1日]，我需要使用“日期间”CSS突出显示1月9日和2月1日之间的所有日期。我试图覆盖鼠标输入，但似乎无法正确执行逻辑。我还这样做是为了在每个日期添加：hover:.ui日期选择器表td:hover{background color:#bdbdbdbd；}
.start-date .ui-state-default, .end-date .ui-state-default {
background: #0000FF;
color: #FFFFFF;
}
.between-date .ui-state-default {
background: #9999FF;
}
function loadDatepickers(){
var fromDate = new Date($(".lblDateFrom").text());
var toDate = new Date($(".lblDateTo").text());
....
},
beforeShowDay: function(date){
if (date >= fromDate && date <= toDate) {
return [true, 'ui-individual-date', '']; //css class that applies the highlighting to each date
}
else {
return [true, '', ''];
}
}),
....
// in css file
.ui-individual-date {
background-color: #F2F5F7;
$( 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() {
$(".between-date").removeClass("between-date"); // reset
isBetween = false;
foundFirst = 0;
calendar = $(this).closest('.ui-datepicker');
if(calendar.find('.start-date').length > 0 && calendar.find('.end-date').length == 0) {
calendar.find('.ui-state-default').each(function() {
if($(this).hasClass("ui-state-active")) {
if(foundFirst==0) foundFirst=-1;
isBetween = (foundFirst == -1 ? true : false);
}
if($(this).hasClass("ui-state-hover")) {
if(foundFirst==0) foundFirst=1;
isBetween = (foundFirst == 1 ? true : false);
}
if(isBetween) {
$(this).addClass("between-date");
}
});
}
})