I am using Jquery date picker for selecting a date, and I'd like to be able to default the selection to a given date.

Here's my code:

var SelectDate=new Date(2013, 06,25 , 0, 0, 0, 0) ;
$("#OnwardTravelDate").datepicker({ 
      numberOfMonths: 2, 
      dateFormat: 'dd/mm/yy', 
      minDate: datePickMinDate_DT, 
      maxDate: datePickMaxDate_DT, 
      defaultDate: SelectDate 
});

But the date selector control highlights both today's date and the date 'selectDate' . I want only 'selectDate' as highlighted

I am using Jquery date picker for selecting a date, and I'd like to be able to default the selection to a given date.

Here's my code:

var SelectDate=new Date(2013, 06,25 , 0, 0, 0, 0) ;
$("#OnwardTravelDate").datepicker({ 
      numberOfMonths: 2, 
      dateFormat: 'dd/mm/yy', 
      minDate: datePickMinDate_DT, 
      maxDate: datePickMaxDate_DT, 
      defaultDate: SelectDate 
});

But the date selector control highlights both today's date and the date 'selectDate' . I want only 'selectDate' as highlighted

• javascript
• jquery

4 Answers 4

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 pile it to use.

Datepicker assigns different classes to "today" and "selected day":

today - ui-state-highlight

selected day - ui-state-active

You can either remove or override styling of ".ui-datepicker .ui-state-highlight" or remove the class:

$("#OnwardTravelDate a.ui-state-highlight").removeClass("ui-state-highlight");

What about setting the value of #OnwardTravelDate in html or jquery?

HTML:

<input type="text" id="OnwardTravelDate" value="25/06/2013" />

jQuery:

$("#OnwardTravelDate").val("25/06/2013"); // Before datepicker code

Then you don't need your defaultDate: SelectDate at all :)

Hope that helps.

Edit: (more info)

You could also try the setDate method:

$("#OnwardTravelDate").datepicker("setDate", SelectDate); // After datepicker code

Edit: jsfidle

This JS fidle seems to work for me: jsfiddle

Maybe the styling on your theme makes it look like it's selected?

EDIT1: From here I found just a fix, but I'm not able to handle with your code.

$( "#datepicker" ).datepicker({
   beforeShow: function(input, inst) {       
       window.setTimeout(function(){
           $(inst.dpDiv).find('.ui-state-highlight.ui-state-hover').removeClass('ui-state-highlight ui-state-hover')      
       },0)     
   },   
});

Check this JSFiddle and if possible update it with your code you trying.

EDIT2: By overriding the default css .ui-datepicker-today and a.ui-state-highlight of with the below one.

.ui-datepicker-today a.ui-state-highlight {
    border-color: #d3d3d3;
    background: #e6e6e6 url(/themeroller/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
    color: #555555;    
}

Check out this JSFiddle