JQueryUI Datepicker-如何在鼠标悬停时高亮显示选定日期之前/之后的日期？
[英]JQueryUI Datepicker - how to hi-light days before/after selected date on mouse hover?
问题描述
我一直在试图找出如何在选定日期之前/之后的所有日子进行高光照明，但是我似乎无法获得悬停时表格单元格发生变化的背景色。 我要寻找的效果类似于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;
}
2 个解决方案
解决方案1
1 2015-11-27 10:26:08
我一直在寻找相同的东西，但在上面的示例中，突出显示仅在选择两个日期之后才会出现。 我希望突出显示在选择第一个日期并悬停任何其他日期后立即在所有日期之间出现。 我修改了您的jsfiddle，这是使悬停工作的解决方案：
$( 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");
}
});
}
})
}）;
解决方案2
0 2015-04-03 15:11:18
我这样做是为了突出显示范围内的特定日期...
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;
}
如何在 Daterangepicker 选择的 datepicker 1 后设置最多 9 天
[英]How to set max 9 days after datepicker 1 selected by Daterangepicker
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.