How to do a period-limited search with datepicker?

Question

How to do a period-limited search with datepicker?

Navigation

#1 by (1 votes)

0

I have a data_inicio field and a data_fim field. I need to use datepicker on both.

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

How to do this in jQuery UI?

jquery jquery-ui

asked by anonymous 18.03.2016 / 14:45

1 answer

UTF8 only works on mysql only or on page [duplicate] Select Union same table

score 1 · Accepted Answer

You can set the options minDate and 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><scriptsrc="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" />