Home/ Questions/Q 177967
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-11T14:08:55+00:00

I’m using the jQuery datepicker to select dates. It works fine, except there is

  • 0

I’m using the jQuery datepicker to select dates. It works fine, except there is 1 default behavior that I would like to change. When you select a day, the selected day is highlighted (which I like). The current day is also highlighted, but using a different css style (which I also like). However, if you select the current day, the highlighting because it is the current day supersedes it being selected… I would much prefer it being selected to supersede the current day highlight, which I feel would make it very clear that you have selected the current day.

Now, I feel I could probably update the css to solve my problem. However, I really don’t want to tweak the out-of-the-box jQuery UI css, because I want to later add skins to my app. This means if I grab a bunch of the jQuery UI themes… I then have to make the same tweak on all of them (very undesirable).

I could probably update the actual Datepicker plugin to do this as well, but then I run into the issue that if I want to update my Datepicker later on… I need to remember to make this fix again.

Ideally, I could use some option built into the Datepicker to accomplish my goal, but as of yet none of the options seem to be right. I would settle for some kind of JavaScript hack, or css plopped into the page, but I’m at a loss for ideas right now.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Adding an additional CSS file to your page would definitely be the preferred method. It’s easily managed and uses CSS the way it was intended to be used!

    You would need to place your override CSS in the head tag after any previously loaded base jQuery CSS or any theme CSS files in order to override their values. (You could also increase the specificity of the default tag, referencing a class or ID in your specific instance.)

    i.e.

    <head>   <link href='base_jquery_css_file' rel='stylesheet'/>   <link href='theme_jquery_css_file' rel='stylesheet'/>    <link href='your_override_css' rel='stylesheet'/> </head>

    The ‘your_override_css’ file would simply contain:

    .ui-state-active, .ui-widget-content .ui-state-active {   /*any CSS styles you want overriden i.e.*/   border: 1px solid #999999;   background-color: #EEEEEE; }

    Note from Mike:

    I ended up finding out that there is a td around the anchors that represent the days, and the td also has the ‘today’ information… so despite there not being a cross-browser way to select an item that has multiple classes (that I’ve found), the following will work in this case, in a new file just as PHPexperts.ca describes:

    .ui-datepicker-today .ui-state-active {   border: 1px solid #aaaaaa; }
    • 0