CODEWITHSUNDEEP
javascriptjqueryjquery-ui
David
David

Reputation: 224

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

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.

Upvotes: 0

Views: 1959

Answers (2)

mcot
mcot

Reputation: 1329

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

Upvotes: 3

Tim
Tim

Reputation: 779

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();

Upvotes: 1

Related Questions