Derreck Derreck - 22 days ago 11
CSS Question

How to style the color of the numbers in a jquery-ui datepicker?

I googled the title and it did not help. I have the following css:

.ui-datepicker-calendar{
position: absolute;
top:100%;
left: 0%;
font-size:18px;
color: #ff0; /*This does not work*/
fill: #ff0; /*This does not work*/
background: #000;
}


All the properties do affect the style of my datepicker except for the ‘color’ or ‘fill’ property. Neither of these properties will change the color of the numbers of my datepicker, which for some reason is blue. I am not linked to the theme.css file (i.e. jquery-ui.theme.min.css).
Any help will be greatly appreciated.

Answer

To style the numbers you have to use these selectors:

.ui-datepicker td span, .ui-datepicker td a {
  color: #ff0; /* Numbers color */
  fill: #ff0; 
}
.ui-datepicker td {
  background: #ededed; /* Numbers background */
}
.ui-datepicker-calendar .ui-state-hover {
  color: red;  /* Numbers color on hover */
}
.ui-datepicker-calendar .ui-state-active {
  color: green; /* Selected date color */
}