Question

我目前正在尝试更改jQuery UI datepicker中特定日期的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应该允许我在datepicker中为每个假期指定我想要的任何样式。但是，我在课堂上使用的任何样式都没有实际出现; UI样式优先。当然，我可以通过从UI css文件中删除css样式来解决问题，但从设计的角度来看，这是一个非常糟糕的方法。这是我指定的CSS（指定！important没有改变任何东西）：

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

我试图通过将css作为内联样式应用于由datepicker生成的td节点内的节点来进行'破解'（更具体，更多内部规则应该具有更高的CSS优先级）并执行以下操作：

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

似乎onChangeMonthYear将在显示datepicker之前运行此函数。而且由于这种情况发生，datepicker的css会覆盖我想要做的事情。如果我只是在Firebug中运行这段代码并打开一个日期选择器，它就可以正常运行。

是否有使用.css（）在显示一个月后更改datepicker的css？我想避免尝试更改jQuery UI css或js文件。即便如此，这似乎是一个糟糕的设计。还有其他想法吗？

Answer 1

您列出的CSS，特别是那里的！important，应该覆盖默认样式。只要样式在默认样式之后，它们应该覆盖而没有任何问题。 JQuery UI甚至不应该在TD上放置任何需要你使用的内容！important。

你有什么机会在某个地方举个例子吗？这可能非常简单。只要你在正确的日期有DOM中的类，它应该是次要的CSS，没有有趣的东西。

Jquery UI - Datepicker onChangeMonthYear

1 个答案: