Question

I have 2 datepickers for hotelbooking with 2 textfields in a form for date range. If someone selects a date with the first datepicker the second automatically fill the same date in textfield two. How can I change the script to fill the date of the next day in textfield two instead of the same date?

My Code

$(function() {
var dates = $( "#from, #to" ).datepicker({
showOn: "both",
buttonImage: "fileadmin/template/datepicker/img/kalender.png",
buttonImageOnly: true,
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 1,
onSelect: function( selectedDate ) {
  var option = this.id == "from" ? "minDate" : "maxDate",
    instance = $( this ).data( "datepicker" );
    date = $.datepicker.parseDate(
      instance.settings.dateFormat ||
      $.datepicker._defaults.dateFormat,
      selectedDate, instance.settings );
  dates.not( this ).datepicker( "option", option, date );
}
});    

Answer 1

Try this code for onSelect event:

onSelect: function(selectedDate) {
    var option = this.id == "from" ? "minDate" : "maxDate";
    var date = new Date($(this).datepicker('getDate'));
    date.setDate(date.getDate() + 1);
    dates.not(this).datepicker("option", option, date);
}