Jquery UI Datepicker: Don't Highlight Today When It Is Also Selected

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

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

jQuery Datepicker - do not highlight today

To make sure the jquery-ui doesn't add the class after showing the datepicker you can run this code after rendering the datepicker.

$('#ui-datepicker-div').datepicker({
   //options
})
.find('a.ui-state-highlight')
.removeClass('ui-state-highlight');

jQuery UI Datepicker - Disable current date but NOT the highlight

The datepicker has a class on todays date called "ui-datepicker-today", so I simply added a class to that:

$(".ui-datepicker-today span").addClass("ui-state-hover")

Jquery Date picker is Selecting today and default date given

removeClass("ui-state-highlight"); should fix your problem.

but if you just want the highlight of today never show again, you may get the datepicker's source (jquery.ui.datepicker.js) and find this line to remove:

(printDate.getTime() == today.getTime() ? ' ui-state-highlight' : '') +

then compile it to use.

Prevent jQuery UI Datepicker (inline type) from selecting today's date

If all you want is to prevent the highlight of today's date override the highlight class with same properties used for the default class

$("#datepicker").datepicker();

.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight {  border: 1px solid #c5c5c5;  background: #f6f6f6;  font-weight: normal;  color: #454545;}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"><link rel="stylesheet" href="/resources/demos/style.css"><script src="https://code.jquery.com/jquery-1.12.4.js"></script><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>.ui-state-highlight,.ui-widget-content .ui-state-highlight,.ui-widget-header .ui-state-highlight {  border: 1px solid #c5c5c5;  background: #f6f6f6;  font-weight: normal;  color: #454545;}</style>
<p>Date:  <input type="text" id="datepicker"></p>

Jquery UI Datepicker: Don't Highlight Today When It Is Also Selected