jQuery UI date picker - updating another date picker on selecting a date

Question

I have 2 date pickers using the Jquery UI. If the user selects a date from date picker 1, how can I get it to update date picker 2 automatically with the same date?

I think this might be quite simple, but I've tried a few things and nothing seems to work.

Thanks in advance.

Answer 1

The date picker is essentially a text input element. You can use the jquery change handler on the first input element to grab its contents when they change, then simply select the second input element and update the value using jquery val.

http://api.jquery.com/change/ http://api.jquery.com/val/

Something like:

$("#firstdatepicker").change(  function() {
   $("#seconddatepicker").val($(this).val());
});

Answer 2

You'll want to use the onClose event to update the second text field.

I've created this fiddle here that works; for some reason the styling that's usually on the datepicker is not coming in though.

HTML:

<input type="text" name="date1" value="" />
<br>
<input type="text" name="date2" value="" />

Javascript:

$("input[name=date1]").datepicker({
    onClose: function(dateText, inst) {
        $("input[name=date2]").val(dateText);
    }
});
$("input[name=date2]").datepicker();