ansaurus

Question

jQuery UI Datepicker: don't highlight today when it is also selected

Answer 1

+2 A:

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;
}

PHPexperts.ca 2009-04-08 18:24:16

This seems to work perfectly, and is exactly what I wanted! thanks!

Mike Stone 2009-04-08 18:56:37

Answer 2

A:

Since it took me a while to figure out how to exactly replicate the "selected" style over top of the today style even with the answer from PHPexperts.ca, here's a bit more information that might make it a bit more straightforward if you're having trouble.

If you select a day other than "today", the style that you should copy for an identical look when "today" is selected is in the a tag and in the selector

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active

This should be easy to find if you have Firefox with Firebug installed (select the date, reopen the datepicker, right click and select 'inspect element'.

For the jQuery UI theme 'UI darkness' the style to copy into your override css is

.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active { background:url("images/ui-bg_inset-soft_30_f58400_1x100.png") repeat-x scroll 50% 50% #F58400; border:1px solid #FFAF0F; color:#FFFFFF; }

If you change the theme, it looks like all 3 of these styles change.

Shaun Mahood 2010-08-17 20:28:06

ansaurus

tags:

views:

answers:

jQuery UI Datepicker: don't highlight today when it is also selected

related questions