Jquery DatePicker 颜色周日红答案

【问题标题】：Jquery DatePicker color Sunday redJquery DatePicker 颜色周日红
【发布时间】：2011-03-03 12:21:18
【问题描述】：

有没有办法在 Jquery Datepicker 中将颜色更改为红色，比如红色？

【问题讨论】：

【解决方案1】：

$('#something').datepicker({
    beforeShowDay:function(date){
        if(date.toString().indexOf('Sun ')!=-1)
            return [1,'red'];else
            return [1];
    }
}

css：

.ui-datepicker td.red a{
color:#f00 !important;
}

不是很漂亮，但可以根据需要使用。

【讨论】：

【解决方案2】：

对于周日和周六，您可以考虑使用 jquery datepicker 添加类 .ui-datepicker-week-end 的事实，以便您可以将 .ui-datepicker-week-end{color:#f00;} 添加到您的 css 文件中。

如果您只想处理星期日，则必须说明这将是 jquery datepicker 生成的表中的第一列或最后一列（它取决于区域设置）。

一般建议：使用 firefox+firebug（或类似的东西）检查 html 代码。它提供了很多关于如何完成与 jquery DOM 遍历相关的任务的想法。

【讨论】：

【解决方案3】：

如果您有 ui.datepicker.js 文件的本地副本（自定义缩小文件也可以使用）并且没有对 .ui-datepicker-week-end 类做任何其他事情，您可以编辑它（制作一个首选复制到编辑，）以便只分配星期日的课程。

在 ui.datepicker.js 文件中，搜索 'week-end' 应该会显示两个结果，其中包含前面的内联 if 语句：(t+h+6)%7>=5? 将 >=5 更改为 ==6 将分配 .ui- datepicker-week-end 类只到周日。

(t+h+6)%7==6?" ui-datepicker-week-end":""

然后您可以添加您认为适合该类的 CSS 样式：

.ui-datepicker-week-end {
    background: #f00;
}

【讨论】：

【解决方案4】：

假设第一列是星期天，那么下面的 jQuery 应该可以解决问题：

$('table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a').css({'background':'#f00'});

虽然每次更改日历时都必须运行它，例如当您选择一个日期时，日历每次都会重绘。

您可以在 css3 中使用相同的选择器，但 IE 不支持它。

table.ui-datepicker-calendar td.ui-datepicker-week-end:nth-child(1) a
{
    background: #f00;
}

【讨论】：

【解决方案5】：

如果您需要为周六和周日着色，请使用此 CSS：

.ui-datepicker-week-end, .ui-datepicker-week-end a.ui-state-default {color: #C00;}

【讨论】：

【解决方案6】：

在documentation page 的主题选项卡下，您可以看到插件输出的示例 HTML。您应该能够使用选择器来定位 HTML 中的特定元素：

.ui-datepicker-calendar > tbody td:first-child {
    background-color: red;
}

jQuery:

$(".ui-datepicker-calendar > tbody td:first-child").css("background-color: red");

未经测试并假设第一列是星期日，因此可能需要进行一些调整。如果将星期日设置为不同的列，请改用:nth-child(n)。

【讨论】：

很好的例子，但有时星期日是最后一列（例如波兰语本地化），但我认为更改很容易
@Dzida：它是可配置的，可以是表中的任何列，在这种情况下，您可以使用:nth-child(n) 或:last-child。编辑了我的答案以反映这一点。

【解决方案7】：

您可以使用 css 更改星期天的颜色

.datepicker table tr td:first-child {
 color: red
 }

星期六颜色可以这样变化

.datepicker table tr td:first-child + td + td + td + td + td + td  {
 color: red
 }

如果您的代码不能正常工作，请转到 inspent 元素并为 datepicker 日期找到正确的 css 路径并将其设置在 css 之上

【讨论】：