Search code examples
jquerycssjquerydatetimepicker

Apply Css to date links in jQuery ui datepicker

In an html file that uses jQuery's Ui Datepicker I want to change the css of the numbers in the window that pops up. I have styled my links in my file as follows:

a {
/*code here */
}

And as far as I can tell this styling is being applied to the numbers (1, 2, 3, etc.) and treating them as links. How can I style these specific links in the datepicker i.e. what is the Css selector syntax.

Solution

  • On current jQuery UI Datepicker, all day links can be styled via:

    .ui-datepicker-calendar a.ui-state-default {
    color: green;
}

    The selected day background/color/border via:

    .ui-datepicker-calendar a.ui-state-highlight {
    background: none pink;
}