3

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.

2 respuestas 2

1

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.

var $datepicker2 = $("#datepicker2");
var $datepicker3 = $("#datepicker3");

$('#datepicker1').datepicker( {
      maxDate: new Date(),
      onSelect: function(fecha) {
          $datepicker2.datepicker({          
                maxDate: new Date(),
                onSelect: function(fecha) {
                  $datepicker3.datepicker({
                     maxDate: new Date()
                  });
                  $datepicker3.datepicker("option", "disabled", false);
                  $datepicker3.datepicker('setDate', null);
                  $datepicker3.datepicker("option", "minDate", fecha); 
              }
          
          });
          $datepicker2.datepicker("option", "disabled", false);
          $datepicker2.datepicker('setDate', null);
          $datepicker2.datepicker("option", "minDate", fecha); 
      }
  });
 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
<p>Fecha 1: <input type="text" class="datepicker" id="datepicker1"></p>
<p>Fecha 2: <input type="text" class="datepicker" id="datepicker2" disabled></p>
<p>Fecha 3: <input type="text" class="datepicker" id="datepicker3" disabled></p>

1
  • Este código fue la solución. Le hice unas modificaciones para adaptarlo a lo que necesito. Le he quitado la opción de habilitar o deshabilitar los inputs y funciona igual de perfecto. Gracias. el 17 ago. 2017 a las 1:09
0

Aquí este humilde ejemplo, el codigo va comentado para que entiendas lo que hace, espero sea lo que buscabas.

//se inicializa el primer input tipo Date
$(function() {
  $.datepicker.setDefaults($.datepicker.regional["es"]);
  $("#datepicker1").datepicker({
    dateFormat: 'dd/mm/yy',
    firstDay: 1
  }).datepicker("setDate", new Date());
});

//este seria el terver input que no deja ingresar fechas menores a la actual
$(function() {
  $("#datepicker3").datepicker({
    minDate: 0
  });
});

//este es el evento de cambiar la fecha del primer DateTimePicker, este evento se produce al seleccionar la fecha, una vez seleccionada la fecha cambia la fecha del segundo Input
$("#datepicker1").datepicker({
  onSelect: function() {
    $(function() {
      $("#datepicker2").val($("#datepicker1").val());
    });
  }
});

//inicializa tipo DateTimePicker
$(function() {
  $.datepicker.setDefaults($.datepicker.regional["es"]);
  $("#datepicker2").datepicker({
    dateFormat: 'dd/mm/yy',
    firstDay: 1
  }).datepicker("setDate", new Date());
});


//inicializa tipo DateTimePicker
$(function() {
  $.datepicker.setDefaults($.datepicker.regional["es"]);
  $("#datepicker3").datepicker({
    dateFormat: 'dd/mm/yy',
    firstDay: 1
  }).datepicker("setDate", new Date());
});
<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/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.js"></script>
<div>
  <label for="datepicker">Selecciona Fecha:</label>
  <input type="text" id="datepicker1" />
  <input type="text" id="datepicker2" />
  <input type="text" id="datepicker3" />
</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.