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.

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.

• javascript
• jquery
• jquery-ui
• date
• jquery-ui-datepicker

4 Answers 4

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

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

Here is the code i use to set the max date of a second dialog to one month later than the first. So you would just set default date instead

   var beginsDate=$('#dlg_begins').datepicker('getDate');
   var monthMillisec=30*24*60*60*1000;
   var maxDate=new Date();
   maxDate.setTime( beginsDate.getTime() + monthMillisec );

   $('#dlg_expires').datepicker('option',
   {
       'maxDate':maxDate,
       'minDate':beginsDate
   });

` 
 <div class="col-sm-3 col-md-3" style="text-align:right;">
                    <label for="misdatepicker"><i class="fa fa-calendar" style="font-size: 30px;margin-top:2px"></i></label>
                    <input type="text" id="MISStartDate" value="From Date" readonly>
                </div>
                <div class="col-sm-3 col-md-3">
                    <label for="misdatepicker"><i class="fa fa-calendar" style="font-size: 30px;margin-top:2px"></i></label>
                    <input type="text" id="MISEndDate" value="To Date" readonly></div>
$(function () {
                $("#MISStartDate").datepicker({
                    //minDate: '-3M',
                    maxDate: new Date(),
                    changeMonth: true,
                    dateFormat: 'dd-mm-yy',
                    onClose: function (selectedDate, instance) {
                        if (selectedDate != '') {
                            $("#MISEndDate").datepicker("option", "minDate", selectedDate);
                            var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
                            date.setMonth(date.getMonth() + 6);                           
                            if (date > new Date()) {
                                date = new Date();
                            }
                            $("#MISEndDate").datepicker("option", "minDate", selectedDate);
                            $("#MISEndDate").datepicker("option", "maxDate", date);
                            $("#MISEndDate").datepicker("setDate", date);
                        }
                    }
                });
                $("#MISEndDate").datepicker({
                    //minDate: "dateToday",
                    maxDate: new Date(),
                    changeMonth: true,
                    dateFormat: 'dd-mm-yy',
                    onClose: function (selectedDate, instance) {
                        var date = $.datepicker.parseDate(instance.settings.dateFormat, selectedDate, instance.settings);
                        console.log(date);
                        if (date != null) {
                            date.setMonth(date.getMonth() - 6);
                        }
                        $("#MISStartDate").datepicker("option", "maxDate", selectedDate);
                        $("#MISStartDate").datepicker("option", "minDate", date);
                    }
                });
            });`