0

Estoy trabajando en la selección de un rango de horas con timepicker de jQuery. Simplemente se debe seleccionar una hora inicial y una hora final, cuyo rango entre ambas no sobrepase las dos horas. La idea es que al seleccionar la hora inicial, el timepicker de la hora final sólo despliegue mínimo la hora inicial seleccionada y máximo dos horas posteriores a la hora inicial seleccionada; no debería mostrar horas anteriores o posteriores a ese rango. Traté de atribuir el valor del la etiqueta input llamada "inicial" a las propiedades "minTime" y "maxTime" del timepicker correspondiente a "final", pero no está resultando.

¿Alguna idea de cómo se podría lograr lo propuesto anteriormente? De antemano, gracias.

VISTA:

<div class="form-row">
  <div class="col-md-4 mb-3">
    <label>HORA INICIAL:</label>
    <input type="text" class="form-control" name="inicial" id="inicial" required>
  </div>
  <div class="col-md-4 mb-3">
    <label>HORA FINAL:</label>
    <input type="text" class="form-control" name="final" id="final" required>
  </div>
</div>

SCRIPT (jQuery):

$(function(){

  $('#inicial').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: '00:00',
    maxTime: '23:00',
    startTime: '12:00',
    dynamic: true,
    dropdown: true,
    scrollbar: true,
    zindex: 9999999
  });

  $('#final').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: $('#inicial').val(),
    maxTime: $('#inicial').val() + 2,
    startTime: $('#inicial').val(),
    dynamic: true,
    dropdown: true,
    scrollbar: true,
    zindex: 9999999
  });

});

JSFiddle:

https://jsfiddle.net/xztqyh6u/

1 respuesta 1

1

Tienes que poner los valores del segundo timepicker una vez has seleccionado los del primero.

Por lo que he visto en su documentación tienen la opción de realizar acciones al cambiar el valor. Poniendo en el evento change que ponga como valor mínimo la hora seleccionado en el primer selector y sumándole 2 horas al valor como máximo debería funcionar:

$(function(){

  $('#inicial').timepicker({
    timeFormat: 'HH:mm',
    interval: 30,
    minTime: '00:00',
    maxTime: '23:00',
    startTime: '12:00',
    dynamic: true,
    dropdown: true,
    scrollbar: true,
    zindex: 9999999,
    change: function(time){

      $('#final').val('');

      $('#final').timepicker({
        timeFormat: 'HH:mm',
        interval: 30,
        dynamic: true,
        dropdown: true,
        scrollbar: true,
        zindex: 9999999
      });

      var inicialTime = time.getTime();
      var minTime = new Date(time.getTime() + (.5*60*60*1000));
      var maxTime = new Date(time.getTime() + (2*60*60*1000));
      $('#final').timepicker('option','minTime', minTime);
      $('#final').timepicker('option','maxTime', maxTime);
  
    }
  });
});
.ui-timepicker-container{position:absolute;overflow:hidden;box-sizing:border-box}.ui-timepicker,.ui-timepicker-viewport{box-sizing:content-box;height:205px;display:block;margin:0}.ui-timepicker{list-style:none;padding:0 1px;text-align:center}.ui-timepicker-viewport{padding:0;overflow:auto;overflow-x:hidden}.ui-timepicker-standard{font-family:Verdana,Arial,sans-serif;font-size:1.1em;background-color:#FFF;border:1px solid #AAA;color:#222;margin:0;padding:2px}.ui-timepicker-standard a{border:1px solid transparent;color:#222;display:block;padding:.2em .4em;text-decoration:none}.ui-timepicker-standard .ui-state-hover{background-color:#DADADA;border:1px solid #999;font-weight:400;color:#212121}.ui-timepicker-standard .ui-menu-item{margin:0;padding:0}.ui-timepicker-corners,.ui-timepicker-corners .ui-corner-all{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px}.ui-timepicker-hidden{display:none}.ui-timepicker-no-scrollbar .ui-timepicker{border:none}/*# sourceMappingURL=jquery.timepicker.min.css.map */
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.js"></script>

</head>
<body>
<div class="form-row">
  <div class="col-md-4 mb-3">
    <label>HORA INICIAL:</label>
    <input type="text" class="form-control" name="inicial" id="inicial" autocomplete="off">
  </div>
  <div class="col-md-4 mb-3">
    <label>HORA FINAL:</label>
    <input type="text" class="form-control" name="final" id="final" autocomplete="off">
  </div>
</div>
</body>
</html>

A ver si con esto puedes seguir avanzando

2
  • Sí leí sobre el evento "change", pero yo lo había encontrado con el nombre "onChange", lo cual por estar manejando el nombre erróneo del evento no me producía ningún resultado. Me ha funcionado tu respuesta, llevaba tiempo atorada en ese punto. ¡Muchas gracias! el 19 ene. 2022 a las 17:09
  • Me alegro de haber ayudado, de nada! 😊
    – msalinas
    el 19 ene. 2022 a las 17:12

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.