0

Tenho um campo data_inicio e um campo data_fim. Preciso usar o datepicker nos dois.

Quero que, quando eu selecionar a data data_inicio, o campo data_fim fique afetada, de maneira que somente datas posteriores de data_inicio sejam exibidas. E, se selecionar primeiro o data_fim, o campo data_inicio tenha uma data máxima em relação a data selecionada no data_fim.

Como fazer isso no jQuery UI?

Input com datepicker

2

1 Resposta 1

1

Você pode definir as opções minDate e o maxDate para fazer isso:

$(function () {
  var data = {};
  data.inicio = $("#data_inicio");
  data.fim = $("#data_fim");
  
  data.inicio.datepicker({
    onSelect: function () {
      data.fim.datepicker("option", "minDate", data.inicio.datepicker("getDate"));      
    }
  });  
  data.fim.datepicker({
    onSelect: function () {
      data.inicio.datepicker("option", "maxDate", data.fim.datepicker("getDate"));      
    }
  });  
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.theme.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>

<input id="data_inicio" type="text" />
<input id="data_fim" type="text" />

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 .