html - Jquery-UI dynamically increment the date from datepicker calendar -

i created two calendars datepicker jquery ui , want change selected day second calendar according selected date first calendar. example, if select 5/21/2016 first calendar, when click on second input field open second calendar need calendar dynamically change selected date first calendar selected day + 4 days

this code:

<input class="datepicker begin" type="text" /> <input class="datepicker end" type="text"/>      $(function () {         $(".datepicker.begin").datepicker({             mindate: '+2d',             maxdate: '+2y'         })         $(".datepicker.end").datepicker({             mindate: '+4d',             maxdate: '+2y'         });     }); 

the above code should changed this:

$(function () {     $(".datepicker.begin").datepicker({         mindate: '+2d',         maxdate: '+2y'     })     $(".datepicker.end").datepicker({         mindate: $(".datepicker.begin") + 4d,         maxdate: '+2y'     }); }); 

you can use onselect function first date picker in order set value of second :

$(".datepicker.begin").datepicker({         mindate: '+2d',         maxdate: '+2y',         onselect: function(datetext, inst) {            // resolve current date            var begin = new date($(this).val());            var d = begin.getdate();            var m = begin.getmonth();            var y = begin.getfullyear();            // update target date in other date picker            $(".datepicker.end").datepicker('setdate', new date(y, m, d+2));         } }); 

example

you can see working example of in action here , demonstrated below :