Jquery UI - Datepicker onChangeMonthYear

Question

我目前正在尝试更改 jQuery UI 日期选择器中特定日期的 css。如果日期被认为是假期(即，它与给定日期数组中的日期匹配)，我想删除默认图像并对该给定元素添加一些小调整。我通过使用 beforeShowDay 回调函数将“假期”类添加到被视为假期的日期(周末用周末类标记):

beforeShowDay: function(oDate) {
        mResult = oHolidays.fnLookupDate(oDate);
        if (mResult != null) // if the date matched a holiday, mResult is the description
            return [false, 'holiday', mResult];
        else if (oDate.getDay() == 0 || oDate.getDay() == 6) // weekends
            return [false, 'weekend'];
        else // normal day
            return [true, ''];
    }

理论上，将类应用于每个假期的 tds 应该允许我在日期选择器中为每个假期指定我想要的任何样式。但是，我在类里面使用的样式实际上都没有出现； UI 样式优先。 当然，我可以通过从 UI css 文件中删除 css 样式来解决问题，但从设计的 Angular 来看，这是一个非常糟糕的方法。这是我指定的 CSS(指定 !important 没有改变任何东西):

td.holiday {
    background-color: #CC9900;
    background-image: none;
    color: #990000;
    font-weight: bolder;
}

我试图通过将 css 作为内联样式应用于 datepicker 生成的 td 节点中的 a 节点来“破解它”(更具体地说，更多的内部规则应该具有更高的 CSS 优先级)并执行如下操作:

    onChangeMonthYear: function(dateText, inst) {
        $('.holiday').children('a').css({'background-color': 'blue', 'background-image': 'none', 
                                         color: '#990000', 'font-weight': 'bolder'});
    }

似乎 onChangeMonthYear 将在显示日期选择器之前运行此函数。由于发生这种情况，日期选择器的 css 覆盖了我试图做的事情。如果我只是在打开日期选择器的情况下在 Firebug 中运行这段代码，它就可以正常工作。

在显示月份后是否可以使用 .css() 更改日期选择器的 css？我想避免尝试更改 jQuery UI css 或 js 文件。即便如此，这似乎是一个糟糕的设计。还有其他想法吗？

Answer 1

您列出的 CSS，尤其是上面带有 !important 的 CSS，应该覆盖默认样式。只要样式在默认样式之后，它们就应该毫无问题地覆盖。 JQuery UI 甚至不应该在 TD 上内联任何内容，这需要您使用 !important。

你有没有机会在某个地方举个例子？这可能是一件非常简单的事情。只要您在正确的日期在 DOM 中拥有类，它就应该是没有任何有趣内容的次要 CSS。