How to modify the style of jQuery DatePicker's disabled dates?
- by Clay
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;}
