How to modify the style of jQuery DatePicker's disabled dates?

Posted by Clay on Stack Overflow See other posts from Stack Overflow or by Clay
Published on 2010-06-10T17:03:18Z Indexed on 2010/06/10 19:23 UTC
Read the original article Hit count: 356

Given this page: http://jqueryui.com/demos/datepicker/#min-max

And viewing its source: http://jqueryui.com/themeroller/css/parseTheme.css.php

I can change the following line (using Chrome's inspect element feature) and see those changes reflected:

.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .35; filter:Alpha(Opacity=35); background-image: none; }

However, if I try to override my own test page with something like...

.ui-state-disabled, .ui-widget-content .ui-state-disabled { opacity: .99 !important; filter:Alpha(Opacity=99) !important; background-image: none !important; color:Red !important; }

...I do not see my changes reflected in the calendar.

I can make other changes in my own test page and those are reflected for other classes in the datepicker. So, I'm not having any kind of path issue to the .js or .css files.

What am I missing here?

UPDATE/SOLUTION

Firebug to the rescue...this took care of my styling needs:

.ui-datepicker-week-end{color: #c0c0c0 !important;}  div#ui-datepicker-div.ui-datepicker{color: #c0c0c0;}  div#ui-datepicker-div.ui-datepicker:hover{cursor: default important;}  

.ui-datepicker-calendar th{color: #222222 !important;}

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about datepicker