Question

有没有办法在Jquery Datepicker中将颜色更改为红色星期日？

Answer 1

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

如果你只想处理星期日，你必须转发事实，这将是由jquery datepicker生成的表中的第一列或最后一列（它取决于语言环境）。

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

Answer 2

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

在ui.datepicker.js文件中，搜索“周末结束”应该会在其前面的内联if语句中显示两个结果：(t+h+6)%7>=5?将＆gt; = 5更改为== 6将分配.ui-datepicker-week-end课程仅限于周日。

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

然后您可以根据需要添加CSS样式：

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

Answer 3

$('#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;
}

不是很漂亮，但可以根据需要运作。

Answer 4

假设第一列是星期日，那么以下jQuery应该可以解决这个问题：

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

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

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

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

Answer 5

如果您需要在星期六和星期日上色，请使用此CSS：

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

Answer 6

在documentation page上的Theming选项卡下，您可以看到插件的示例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)。

Answer 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

Jquery DatePicker颜色周日红

7 个答案: