How to set maxDate on datepicker to seven days after the selected date?

Question

When a date is selected, the user should be able to select another date within one week after the date he selected.
Here’s the code I’m using:

   $(".datepicker_reservas").datepicker({
    minDate: 0,
    numberOfMonths: [1,4],
    beforeShowDay: function(date) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_entrada").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_saida").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
    },
    onSelect: function(dateText, inst) {
        console.log(dateText);
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_entrada").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_saida").val());
        var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);
        $( ".datepicker_reservas" ).datepicker( "option", "minDate", dateText);
        if (!date1 || date2) {
            $("#datepicker_entrada").val(dateText);
            $("#datepicker_saida").val("");
            $(this).datepicker();
        } else if( selectedDate < date1 ) {
            $("#datepicker_saida").val( $("#datepicker_entrada").val() );
            $("#datepicker_entrada").val( dateText );
            $(this).datepicker();
        } else {
            $("#datepicker_saida").val(dateText);
            $(this).datepicker();
        }
    }
});

I have tried to set maxDate of various shapes;

$( ".datepicker_reservas" ).datepicker( "option", "maxDate ", newDate);
$( ".datepicker_reservas" ).datepicker( "option", "maxDate ", '1w');

But maxDate is based on the current date to give the seven days. How can I get it to use the selected date to set the seven days?

Answer 1

Here’s a way to do what you want, I’ve also added some variables for you to parameterize the minimum number of days the customer could stay.

$(function() {

  // Limite de dias após a data inicial, configure como desejar.
  var maxdays = 7;
  // Diferenca minima entre a data de inicio e saida exemplo minimo de 3 dias colocar 3.
  // 0 =  pode entrar e sair no mesmo dia.
  var diference = 0
  
  $('#startDate').datepicker({
    dateFormat: 'dd/mm/yy',
    onSelect: function(date, obj) {
      //Year, Month -1(comeca em 0 vai ate 11), Day.
      var selected = date.split("/");
      var limitDate = new Date(selected[2],(selected[1]-1),selected[0]);
      var difDate = new Date(selected[2],(selected[1]-1),selected[0]);
      limitDate.setDate(limitDate.getDate() + maxdays);
      difDate.setDate(difDate.getDate() + diference);
      $("#finishDate").datepicker("option", "maxDate", limitDate);
      $("#finishDate").datepicker("option", "minDate", difDate);
    }
  });

  $('#finishDate').datepicker({ dateFormat: 'dd/mm/yy' });

});

<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>

<label>Data Inicial</label>
<input name="startDate" id="startDate" class="date-picker" />
<hr />
<label>Data Final</label>
<input name="finishDate" id="finishDate" class="date-picker" />

Answer 2

I kept making changes to the codes until I got the following result:

$(".datepicker_reservas").datepicker({
    minDate: 0,
    numberOfMonths: [1,4],
    beforeShowDay: function(date) {
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_entrada").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_saida").val());
        return [true, date1 && ((date.getTime() == date1.getTime()) || (date2 && date >= date1 && date <= date2)) ? "dp-highlight" : ""];
    },
    onSelect: function(dateText, inst) {
        console.log(dateText);
        var date1 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_entrada").val());
        var date2 = $.datepicker.parseDate($.datepicker._defaults.dateFormat, $("#datepicker_saida").val());
        var selectedDate = $.datepicker.parseDate($.datepicker._defaults.dateFormat, dateText);

        if (!date1 || date2) {
            $("#datepicker_entrada").val(dateText);
            $("#datepicker_saida").val("");
            $( ".datepicker_reservas" ).datepicker( "option", "minDate", dateText); 
            var data = $.datepicker.parseDate('dd/mm/yy', dateText);
            data.setDate(data.getDate('dd/mm/yy') + 7);               
            $( ".datepicker_reservas" ).datepicker( "option", "maxDate", data);
            $(this).datepicker();
        } else if( selectedDate < date1 ) {
            $("#datepicker_saida").val( $("#datepicker_entrada").val() );
            $("#datepicker_entrada").val( dateText );
            $(this).datepicker();
        } else {
            $("#datepicker_saida").val(dateText);
            $(this).datepicker();
        }
    }
});

The code still needs adjustments to cover other functions, but now the code already counts functionality to show only seven days after the selected date.