How to do a period limited search with datepicker?

Asked

Viewed 527 times

0

I have a field data_inicio and a field data_fim. I need to use the datepicker both of us.

I want that when I select the date data_inicio, the field data_fim is affected, so that only later dates of data_inicio are displayed. And, if you select the data_fim, the field data_inicio has a maximum date in relation to the date selected in data_fim.

How to do this in jQuery UI?

Input com datepicker

jquery jquery-ui
  • 4

    in the documentation itself already has an example, a look. https://jqueryui.com/datepicker/#date-range

  • But now we have an example in English :D

1 answer

1


You can set the options minDate and the maxDate to do this:

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

Browser other questions tagged jquery jquery-ui

You are not signed in. Login or sign up in order to post.