Question

在我的自定义日历中寻找设置可选日期的单元格颜色的正确方法 - 似乎无法找到支持此内容的任何帖子。 true/false,css,mouseover属性中的第二个属性对此主题的支持很少。查看我的Fiddle

A function that takes a date as a parameter and must return an array with:
[0]: true/false indicating whether or not this date is selectable
[1]: a CSS class name to add to the date's cell or "" for the default presentation
[2]: an optional popup tooltip for this date
The function is called for each day in the datepicker before it is displayed.

Answer 1

你的代码很好。问题是你的CSS被更多specificity的CSS覆盖了。换句话说，DatePicker库中的一些CSS胜过你的。要解决此问题，您可以将!important添加到.red CSS属性中，如下所示：

.red2 {
    color: green !important;
}

但是，这是一个严厉的修复。更好的解决方案是通过添加.ui-datepicker-calendar来更加具体地使用CSS选择器：

.ui-datepicker-calendar .red2 {
     color: green;  // etc, etc
}

这将确保您的CSS更具体，因此它将优先于内置的CSS。

演示：http://jsfiddle.net/jtbowden/og2o3ob1/

另一个观察是，您要修改的某些属性实际上位于<a>元素中。例如，为了确保修改文本颜色，您可能需要专门定位<a>元素：

.ui-datepicker-calendar .red2 a {
     color: green;  // etc, etc
}

仅在可选日期设置DatePicker日历单元格颜色

1 个答案: