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: 396
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