Datepicker BeforeShowDay CSS problem with content styling

Question

I think I'm not the only one having this problem.

Whenever I try to apply a BeforeShowDay a new CSS class, the content of the "special date" is not being modified. I tried changing the default theme, adding a new class, but this is affecting only the outside border and not the inside content.

Using Firebug I found that the html code being printed is the following:

<td class=" ui-state-content ui-state-anulados" onclick="DP_jQuery.datepicker._selectDay('#datepicker',9,2009, this);return false;" title="Paddle">
<a class="ui-state-default" href="#">16</a>
</td>

So, my class would be ui-state-content ui-state-anulados but I notice that the ui-state-default class is being applied automatically and I suspect that this may be the problem.

I really don't know how to solve this. I've been looking inside ui.datepicker.js code and I think I found the line that is giving me this problems. It is line number 1394 and it has the following code.

(ui.datepicker.js) (unselectable ? '<span class="ui-state-default">' + printDate.getDate() + '</span>' : '<a class="ui-state-default' +

Any clues on how this can be done?

Thanks in advance.

Manuel.-

Answer 1

If anyone else finds this question then the answer is here. Not a very obvious solution, but logical when you look at the CSS in Firebug. You have to use !important so that your selector is more specific than the jQuery ui CSS selectors.