Jquery UI - Datepicker onChangeMonthYear

Question

I am currently attempting to change the css of specific dates inside a jQuery UI datepicker. If the date is considered a holiday (i.e., it matches a date in a given array of dates), I would like to remove the default image and add some small tweaks to that given element. I add a "holiday" class to dates considered holidays by using the beforeShowDay callback function like so (weekends are marked with a weekend class):

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, ''];
    }

Theoretically, applying a class to the tds of each holiday should allow me to specify whatever styling I want for each holiday in the datepicker. However, none of the styling I use in the class actually appears; the UI styling takes priority. I could, of course, solve the problem by removing the css styles from the UI css file, but that's a really bad approach from a design standpoint. Here is the CSS I specify (specifying !important did not change anything):

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

I tried to 'hack it' by applying the css as an inline style to the a nodes within the td nodes generated by datepicker (more specific, more inner rules should have higher CSS priority) and do something like this:

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

It seems that the onChangeMonthYear will run this function before the datepicker is displayed. And since this happens, the css of the datepicker overrides what I was trying to do. If I just run this bit of code in Firebug with a datepicker open, it works perfectly fine.

Is there anyway to use .css() to change the css of the datepicker after the a month is displayed? I want to avoid trying to change the jQuery UI css or js files. Even so, this seems like a bad design. Any other ideas?

Matthew Darnell Matthew Darnell · Accepted Answer · 2012-03-13T22:05:27

The CSS you listed, espcially with the !important on there, should override the default styles. As long as the styles come after the default ones, they should override with no problems whatsoever. JQuery UI shouldn't even be putting anything inline on the TDs which would require you to use !important.

Any chance you have an example up somewhere? This is probably something really simple. As long as you have the classes in the DOM on the correct dates, it should be minor CSS with no funny stuff.

Jquery UI - Datepicker onChangeMonthYear

1 Answers