使用beforeShowDay修改jquery datepicker CSS

Question

我正在使用beforeShowDay并将课程分配specialDay到我日历中的特定日期; 这工作正常,但我无法理解如何设置类的样式以及主题滚动的css如何正常工作.我试过了:

td .specialDate {
    background: #33CC66;
}

但这对日历的外观没有影响.有任何想法吗？

Answer 1

我有同样的问题,幸运的是我找到了答案.当您禁用一天(设置为"false")时,有效的是指定一个类(".specialDate")来更改背景颜色,但是如果启用了日期则没有,因为我们有另一个样式的锚点("a")覆盖分配给"td"锚点的类.

因此,如果您的日期已启用选择并想要更改样式,则必须编辑继承的"a"锚点,如下所示:

.specialDate a { background: #33CC66 !important; }

添加" !important "(如果您原谅重复)指示以覆盖其他设置非常重要.

希望这可以帮助!

Answer 2

创建您的CSS样式，如下所示：

<style type="text/css">
    td.specialDay, table.ui-datepicker-calendar tbody td.specialDay a { 
    background: none !important;
    background-color: #fffac2 !important; 
    color: #006633;
    }
</style>

然后使用beforeShowDay选项将样式添加到日历。

$('#datepicker').datepicker('option', 'beforeShowDay', highlightDays);


// ------------------------------------------------------------------
// highlightDays
// ------------------------------------------------------------------
function highlightDays(date) {
    for (var i = 0; i < dates.length; i++) {
        if (SOME CONDITION TO DETERMIN SPECIAL DAY) {
            return [true, 'specialDay'];
        }
    }
    return [true, ''];
}

Answer 3

每当我使用 JQuery UI 时，我都会使用Firebug来检查应用于特定元素的任何样式，这将使您能够轻松识别需要使用哪些 CSS 元素。