JQuery UI DatePicker: override today css
I am using beforeShowDay to highlight special days in my jQuery datepicker. The only way to change the background is by using the '! Important 'in my css class. This works great for all days except "today". The css doesn't change the background color, just the border.
my css:
.genEvent a
{
border:solid 1px #DC143C !important;
background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}
You can try qualifying the selector again.
For instance:
body contentDiv .genEvent a
{
border:solid 1px #DC143C !important;
background: #9696BA url(ui-bg_flat_75_9696BA_40x100.png) 50% 50% repeat-x !important;
}
If that works, you can remove the other !important
, which should be avoided as it is a bit antipattern .
a source to share
I found it here ... can help you.
Why don't you use the datepickers functionality to highlight special days? I use the inline datepicker as well and showing special days of work is just fine. I am using something similar to:
$("#mnu_calendar").datepicker({
... other options
beforeShowDay: function(thedate) {
var theday = thedate.getDate();
if( $.inArray(theday,specialDays) == -1 )
return [true,""];
return [true, "specialDate"];
},
... more options
});
specialsDays is my array with special days for this month, for example. [3, 12, 24]. "specialDate" is the datepicker CSS class name will add to the special days, so you can make them look anyway you want
a source to share