How to change calendar colour?

[Georgergb75]

Hi,

Is it possible to change the colour of the calendar on the search options? At the moment when I click on it is showing as a light blue background and the month/year text is barely visible.

I noticed the calendar ranges from 2003 to 2030 so that the “from” date can be up to 2023. Can this be altered?

Many thanks

George

[Ernest Marcinko]

Hi,

The styling of the datepicker is mostly inherent from the WordPress core, but some themes or plugins may add additional styling to it. There are no options to change that on the back-end, but you can use custom CSS to force a correct font color:

.ui-datepicker-title select,
.ui-datepicker-title select option {
    color: #232323 !important;
}

If you want, you can change the background of the header as well as the selection:

div.asp-ui .ui-widget-header {
    background: red;
}

div.asp-ui.ui-datepicker .ui-state-active {
    background: red;
    border: none;
}

The number of years displayed in the selection is a bit more difficult, I’m not sure if I recommend altering that, but you can use a custom CSS like this:

.ui-datepicker-title select option[value="2003"],
.ui-datepicker-title select option[value="2004"],
.ui-datepicker-title select option[value="2005"] {
    display: none !important;
}

All you need to do with this, is make a copy of the first line, and add the values (years), that you don’t want to display in the datepicker drop-down.

[Georgergb75]

Thank you so much for the response. I will give this a try.

[Author]

Posts