jQuery UI datepicker: add 6 months to another date

2019-01-18 14:39发布

问题:

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.

回答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



回答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


回答3:

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