jQuery 如何在日期选择器中突出显示选定的日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7504819/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How To Highlight Selected Dates In Date Picker
提问by user875293
First is there a way to not highlight the current day. Second is there a way to highlight specific days like the way the current day was highlighted?
首先，有一种方法可以不突出显示当前日期。其次，有没有办法像突出显示当天那样突出显示特定日期？
Here is the code i have:
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<link type="text/css" href="css/calendar-theme/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
var dates = [new Date(2011, 9 - 1, 19),
new Date(2011, 9 - 1, 20),
new Date(2011, 9 - 1, 20),
new Date(2011, 9 - 1, 21),
new Date(2011, 10 - 1, 31)];
$(function() {
$('#datepicker').datepicker({
numberOfMonths: [1, 1],
beforeShowDay: highlightDays,
});
$('#datepicker').click(function() {
// put your selected date into the data object
var data = $('#datepicker').val();
$.get('getdata.php?date=' + data, function(data) {
$('#events').html(data).show('slow');
});
});
function highlightDays(date) {
for (var i = 0; i < dates.length; i++) {
if (dates[i].getTime() == date.getTime()) {
return [true, 'highlight'];
}
}
return [true, ''];
}
});
</script>
<style>
#highlight, .highlight {
background-color: #000000;
}
</style>
</head>
<body>
<div id="datepicker" style="float:left;margin: 0 10px 0 0;font-size: 72.5%;"></div>
<div id="events" style="float:left;font-size: 10pt;">
<p>Select a date on the calendar to see events.</p>
</div>
<div style="clear:both"></div>
</body>
</html>
采纳答案by William Niu
First is there a way to not highlight the current day.
首先，有一种方法可以不突出显示当前日期。
Yes, you can take away the highlighting by removing .ui-state-highlightand .ui-state-hoverclasses from the anchor element.
是的，您可以通过从锚元素中删除.ui-state-highlight和.ui-state-hover类来取消突出显示。
Second is there a way to highlight specific days like the way the current day was highlighted?
其次，有没有办法像突出显示当天那样突出显示特定日期？
Yes, either add the classes for highlighting the current day to those days you want to have highlighted, or override the CSS with .ui-state-highlight's style.
是的，要么将用于突出显示当天的类添加到您想要突出显示的那些日子，要么用.ui-state-highlight的样式覆盖 CSS 。
For the first approach, here's an example code snippet:
对于第一种方法，这是一个示例代码片段：
$('#datepicker').datepicker({
numberOfMonths: [1, 1],
beforeShowDay: highlightDays
}).click(function() {
// question 1
$('.ui-datepicker-today a', $(this).next()).removeClass('ui-state-highlight ui-state-hover');
// question 2
$('.highlight a', $(this).next()).addClass('ui-state-highlight');
});
See the first approach in action: http://jsfiddle.net/william/Aut9b. See the second approach in action: http://jsfiddle.net/william/Aut9b/1/.
请参阅第一种操作方法：http: //jsfiddle.net/william/Aut9b。参见第二种方法：http: //jsfiddle.net/william/Aut9b/1/。
回答by JoyGuru
Use beforeShowDay option of jQuery UI date-picker to highlight selected dates in date-picker. Here the simple code:
使用 jQuery UI 日期选择器的 beforeShowDay 选项突出显示日期选择器中的选定日期。这里是简单的代码：
$( function() {
// An array of dates
var eventDates = {};
eventDates[ new Date( '08/07/2016' )] = new Date( '08/07/2016' );
eventDates[ new Date( '08/12/2016' )] = new Date( '08/12/2016' );
eventDates[ new Date( '08/18/2016' )] = new Date( '08/18/2016' );
// datepicker
$('#datepicker').datepicker({
beforeShowDay: function( date ) {
var highlight = eventDates[date];
if( highlight ) {
return [true, "event", 'Tooltip text'];
} else {
return [true, '', ''];
}
}
});
});
The above JavaScript will add eventclass on selected dates. Now you will need to define the style for selected dates. For the complete guide, you can check the source link mentioned above.
上面的 JavaScript 将event在选定的日期添加类。现在您需要定义所选日期的样式。对于完整的指南，您可以查看上面提到的源链接。
