CODEWITHSUNDEEP
jquerydatepicker
Jitender
Jitender

Reputation: 7971

Highlight selected date in jquery datepicker

I have a requirement to highlight selected dates. Lets say if you choose 09/20/2013 from first input then when you click on next input then 09/20/2013 should be highlighted. for reference http://www.expedia.co.in/. fiddle

HTMl

<input class="datepicker" id="depart">    
<input class="datepicker" id="return">

Jquery

$(".datepicker" ).datepicker(
{
numberOfMonths: 2,
onSelect:function(dateStr){
}});

Upvotes: 1

Views: 6571

Answers (2)

j08691
j08691

Reputation: 207901

Try this:

var dp1 = [];
$("#depart").datepicker({
    numberOfMonths: 2,
    dateFormat: "m/dd/yy",
    onSelect: function (d) {
        dp1 = [];
        dp1.push(d);
    }
});
$("#return").datepicker({
    numberOfMonths: 2,
    dateFormat: "m/dd/yy",
    beforeShowDay: function (date) {
        dmy = (date.getMonth() + 1) + "/" + date.getDate() + "/" + date.getFullYear();
        if ($.inArray(dmy, dp1) >= 0) {
            return [true, "foo"];
        } else {
            return [true, ""];
        }
    }
});

jsFiddle example

The first datepicker pushes the selected date onto an array which the second datepicker uses via the beforeShowDay method to determine what cell to apply a class to.

Upvotes: 4

bluetoft
bluetoft

Reputation: 5443

You could use `beforeShow' event to set the date. JSFIDDLE

 $( ".datepicker" ).datepicker(
     {numberOfMonths: 2,
      beforeShow:function(){
          $('#return').val($('#depart').val());
      }}
 );

Upvotes: 0

Related Questions