Highlight selected date in jquery datepicker

Question

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

possible duplicate of [How the jquery Datepicker set some date to highlight?](http://stackoverflow.com/questions/7523653/how-the-jquery-datepicker-set-some-date-to-highlight) — Praveen Lobo, Sep 09 '13 at 15:52

j08691 · Accepted Answer · 2013-09-09T16:25:45.863

4

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.

edited Sep 09 '13 at 16:25

answered Sep 09 '13 at 16:14

j08691

204,283
31
260
272

Hi it is very close to requirement. I found two bug in this code one is year is feeling twice in second input and the second one is when you fill both input with date and again click on first input the selected date should be highlighted – Jitender Sep 09 '13 at 16:22
I updated the code and answer to fix the double year issue, but I'm not sure I understand your second point. Are you saying that after picking the second (return) date that you want the same highlighting on the first datepicker (depart)? If so, is this what you're after: http://jsfiddle.net/j08691/wj4Ry/6/? – j08691 Sep 09 '13 at 16:26

score 0 · Answer 2 · answered Sep 09 '13 at 15:57

0

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

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

answered Sep 09 '13 at 15:57

bluetoft

5,373
2
23
26

I dont wana set date in input, I just want to highlight date which we selected – Jitender Sep 09 '13 at 16:04

Highlight selected date in jquery datepicker

2 Answers2