¿Cómo crear rangos con jQuery UI Datepicker?

publicado por: Anonymous

Yo deseo comparar 3 jQuery UI datepicker de tal manera que si elijo una fecha del primer datepicker, el segundo inicie en esa primera fecha y a su vez la fecha que elija del segundo datepicker sea el inicio del tercer datepicker. Además también deseo colocarle al tercer datepicker como límite la fecha actual. Cuando lo hago en la inicialización del datepicker no lo reconoce.

Por favor si alguien puede ayudarme qué está pasando con este código que no funciona.

                $("#xFechaC").datepicker({
                onClose: function (selectedDate) {
                $("#xFechaE").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#xFechaE").datepicker({
                onClose: function (selectedDate) {
                $("#xFechaC").datepicker("option", "maxDate", selectedDate);
                }
            });
            $("#xFechaE").datepicker({
                onClose: function (selectedDate) {
                $("#xFechaR").datepicker("option", "minDate", selectedDate);
                }
            });
            $("#xFechaR").datepicker({
                onClose: function (selectedDate) {
                $("#xFechaE").datepicker("option", "maxDate", selectedDate);
                }
            });

Muchas gracias.

solución

Sería necesario que lo controles a través de la función onSelect y debido al problema del refrescar el calendario es necesario asignarle la extensión datepicker.

_x000D_

_x000D_

var $datepicker2 = $("#datepicker2");_x000D_
var $datepicker3 = $("#datepicker3");_x000D_
_x000D_
$('#datepicker1').datepicker( {_x000D_
      maxDate: new Date(),_x000D_
      onSelect: function(fecha) {_x000D_
          $datepicker2.datepicker({          _x000D_
                maxDate: new Date(),_x000D_
                onSelect: function(fecha) {_x000D_
                  $datepicker3.datepicker({_x000D_
                     maxDate: new Date()_x000D_
                  });_x000D_
                  $datepicker3.datepicker("option", "disabled", false);_x000D_
                  $datepicker3.datepicker('setDate', null);_x000D_
                  $datepicker3.datepicker("option", "minDate", fecha); _x000D_
              }_x000D_
          _x000D_
          });_x000D_
          $datepicker2.datepicker("option", "disabled", false);_x000D_
          $datepicker2.datepicker('setDate', null);_x000D_
          $datepicker2.datepicker("option", "minDate", fecha); _x000D_
      }_x000D_
  });

_x000D_

 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">_x000D_
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>_x000D_
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>_x000D_
  _x000D_
<p>Fecha 1: <input type="text" class="datepicker" id="datepicker1"></p>_x000D_
<p>Fecha 2: <input type="text" class="datepicker" id="datepicker2" disabled></p>_x000D_
<p>Fecha 3: <input type="text" class="datepicker" id="datepicker3" disabled></p>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *