在jQuery日期选择器中突出显示一周中的特定日期

Question

我的目标是在jQuery日期选择器中突出显示一周中的特定日期。

例如，我想强调周二和周四。我看到了许多如何突出显示特定日期的示例(请参阅：http://jquerybyexample.blogspot.com/2012/05/highlight-specific-dates-in-jquery-ui.html)。但没有一个能满足我的需求。

有什么提示吗？

Answer 1

您可以调整您链接的示例，以执行您想要的操作，如下所示：

CSS：

.Highlighted a{
background-color : Green !important;
background-image :none !important;
color: White !important;
font-weight:bold !important;
font-size: 12pt;
}

Javascript：

$(document).ready(function() {
$('#datepicker').datepicker({
beforeShowDay: function(date) {
var day = date.getDay();
if (day == 2 || day == 4) {
return [true, "Highlighted", date];
}
return [true, '', ''];
}
});
});​

Answer 2

如果您可以假设一周从周日开始，那么您可以使用+相邻选择器仅使用CSS来完成此操作。它看起来可能有点可笑，但它可以在任何支持+和:first-child(包括IE7及更高版本)的浏览器中工作。

/* Tuesday:                Su               Mo   Tu            */
.ui-datepicker-calendar tr td:first-child + td + td a,
/* Thursday:               Su               Mo   Tu   We   Th  */
.ui-datepicker-calendar tr td:first-child + td + td + td + td a {
background:red;
}
​

演示：http://jsfiddle.net/jnGhV/1/

Answer 3

这应该做到：

$(document).ready(function() {
$('#txtDate').datepicker({
beforeShowDay: function(date) {
if(date.getDay() == 2 || date.getDay() == 4) {
return [true, "Highlighted", ''];
} else {
return [true, '', ''];
}
}
});
});​

JSFiddle：http://jsfiddle.net/XuExp/