Skip to main content
adicionou 364 caracteres ao conteúdo
Fonte Link

Segue uma forma de fazer o que você pretende:, também adicionei algumas variáveis para você parametrizar o mínimo de dias que o cliente poderia ficar.

$(function() {

  // Limite de dias após a data inicial, configure como desejar.
  var maxdays = 5;7;
  
 // Diferenca $('#startDate')minima entre a data de inicio e saida exemplo minimo de 3 dias colocar 3.datepicker({
  // 0 changeMonth:= false, pode entrar e sair no mesmo dia.
  var diference changeYear:= false,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'"#finishDate").datepicker({
    changeMonth:"option", false"minDate",
  difDate);
   changeYear: false,}
  });

  $('#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" />

Segue uma forma de fazer o que você pretende:

$(function() {

  // Limite de dias após a data inicial
  var maxdays = 5;
  
   $('#startDate').datepicker({
    changeMonth: false,
    changeYear: false,
    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]);
      limitDate.setDate(limitDate.getDate() + maxdays)
      $("#finishDate").datepicker("option", "maxDate", limitDate);
    }
  });

  $('#finishDate').datepicker({
    changeMonth: false,
     changeYear: false,
    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" />

Segue uma forma de fazer o que você pretende, também adicionei algumas variáveis para você parametrizar o mínimo de dias que o cliente poderia ficar.

$(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" />

Fonte Link

Segue uma forma de fazer o que você pretende:

$(function() {

  // Limite de dias após a data inicial
  var maxdays = 5;
  
  $('#startDate').datepicker({
    changeMonth: false,
    changeYear: false,
    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]);
      limitDate.setDate(limitDate.getDate() + maxdays)
      $("#finishDate").datepicker("option", "maxDate", limitDate);
    }
  });

  $('#finishDate').datepicker({
    changeMonth: false,
    changeYear: false,
    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" />