0

Quando uma data for selecionada, o usuário deverá ter a possibilidade de selecionar outra data dentro do período de uma semana após a data que ele selecionou.
Eis o código que estou usando:

   $(".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();
        }
    }
});

Já tentei setar o maxDate de varia formas;

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

Porém o maxDate está se baseando na data atual para dar os setes dias. Como posso fazer com que ele use a data selecionada para setar os sete dias?

2 Respostas 2

2

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

1
  • Muito obrigado pela ajuda, seu código foi de grande utilidade, estou começando agora aqui, por isso não sei como formular as perguntas direito, esqueci de comentar que precisaria que fosse utilizado somente um datepicker, porém mesmo assim ele ajudou bastante, utilizei algumas partes do seu código e da logica para implementar e melhorar um pouco mais o meu. Muito obrigado
    – Etobdc
    Commented 10/03/2016 às 18:05
0

Continuei a fazer mudanças no códigos até chegar ao seguinte resultado:

$(".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();
        }
    }
});

O código ainda precisa de ajustes para abranger outras funções, porém, agora o código já conta funcionalidade de mostrar somente sete dias após a data selecionada.

4
  • 1
    Errado @Marconi um indivíduo pode responder sua própria pergunta, inclusive existem medalhas para tal incentivando Commented 9/03/2016 às 19:39
  • @FelipeAssunção sim, mais no entender na pergunta me pareçe que ele não conseguiu o que queria ainda.rs
    – Marconi
    Commented 9/03/2016 às 19:41
  • 1
    @Marconi naquele momento eu já havia conseguido o que eu queria, porém ainda me restavam algumas duvidas, então de fato você está certo eu deveria e poderia ter editado a pergunta para esclarecer melhor as duvidas, mas a questão original já tinha conseguido a resposta, mas mesmo assim obrigado
    – Etobdc
    Commented 10/03/2016 às 17:57
  • eu entendi foi isso também @BDC.
    – Marconi
    Commented 10/03/2016 às 19:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .