jQuery UI datepicker: add 6 months to another datepicker

Question

I have two datepickers calendars, one for a start date, and another for an end date.

What I want is to set dynamically the defaultDate of the second datepicker to be six months later than the first one, when the first date is picked.

I know how to report the fisrt date to the second datepicker, but I don't know how to add six months to the first then add it as the defaultdate of the second datepicker

Here is my code :

$(".firstcal").datepicker({
    dateFormat: "dd/mm/yy",
    onSelect: function (dateText, inst) {
        var date = $.datepicker.parseDate('dd/mm/yy', dateText);
        var $sec_date = $(".secondcal");
        $sec_date.datepicker("option", "defaultDate", date);
    }
});
$(".secondcal").datepicker({
    dateFormat: "dd/mm/yy"
});

Thanks a lot for your help

Edit:

In datePicker, the function to add six month to a date exists : it's labeled "+6M". I just want to add "+6M" to the first date and send it as the default date to the second.

Solution 1

1. Parse the selected date string into a JavaScript date object.
2. Use Date.getMonth() and Date.setMonth() to change the month. The latter function automatically increments/decrements the year if necessary.
3. Use jQuery datepicker's setDate method to change the date of the second datepicker (setting the defaultDate will not give you the desired results).

onSelect: function(dateText, instance) {
    date = $.datepicker.parseDate(instance.settings.dateFormat, dateText, instance.settings);
    date.setMonth(date.getMonth() + 6);
    $(".secondcal").datepicker("setDate", date);
}

Demo here

Solution 2

To add 6 months to a date

 var second_date = new Date(date);
 second_date.setMonth(second_date.getMonth()+6); //+6 is however many months

then update the value

$("#secondcal").val(second_date);  //It is probably better to work with ID