Foros del Web » Programando para Internet » Javascript »

mostrar horas de diferencia en timepicker

Estas en el tema de mostrar horas de diferencia en timepicker en el foro de Javascript en Foros del Web. tengo un select que le saco su valor directamente desde la base de datos que me muestras las horas registradas y aparte tengo dos timepicker ...
  #1 (permalink)  
Antiguo 16/10/2018, 14:41
Avatar de aviweb2015  
Fecha de Ingreso: abril-2016
Ubicación: venezuela
Mensajes: 215
Antigüedad: 2 años, 8 meses
Puntos: 1
Exclamación mostrar horas de diferencia en timepicker

tengo un select que le saco su valor directamente desde la base de datos que me muestras las horas registradas y aparte tengo dos timepicker hora de entrada y hora de salida ahora lo que quiero es esto: si en el select escojes 3 horas, el input hora de entrada se escoje las hora actual que marca el pc, pero en el input hora de salida debe marcar las horas de diferencias, ejemplo si son las 9 pm que es la hora actual entonces en el input hora de salida debe marcar 12 am porque hay tres horas de diferencias que es las que se ecojieron en el select, otro ejemplo

escojo: 9 horas
la hora de entrada es: hora de entrada: 1 pm
debería marcarse automáticamente la hora de salida a: hora de salida: 9 pm


mi select e input

Código PHP:
Ver original
  1. <div class="input-field col s12 m4">
  2. <select name="horas" id="horas"  onchange="calcula_porcentaje(this.value)">
  3. <option value="" disabled selected>Cantidad Horas:</option>
  4. <?php
  5. $consulta = $DB_con->query("SELECT * FROM horas ORDER BY id_horas");
  6. while ($linea = $consulta->fetch(PDO::FETCH_ASSOC)) {
  7. ?>
  8. <option value="<?php echo $linea['horas'] ;?>"><?php echo $linea['horas'] ;?> Horas</option>
  9. <?php
  10. }
  11. ?>
  12. </select>
  13. </div>
  14.  
  15. <div class="input-field col s12 m4">
  16. <input type="text" id="hora_entrada" class="timepicker" name="hora_entrada"/>
  17. <label for="cuentas" class="black-text ">Hora de Entrada:</label>
  18. </div>
  19.  
  20. <div class="input-field col s12 m4">
  21. <input type="text" id="hora_salida" class="timepicker" name="hora_salida"/>
  22. <label for="cuentas" class="black-text ">Hora de Salida:</label>
  23. </div>

mi funcion

Código Javascript:
Ver original
  1. const hora_entrada = document.getElementById('hora_entrada')
  2.     const hora_salida = document.getElementById('hora_salida')
  3.     const horas = document.getElementById('horas')
  4.  
  5.   const actualizarSalida = () => {
  6.   const date = new Date(hora_entrada.value)
  7.   const horasSeleccionadas = parseInt(horas.options[horas.selectedIndex].value)
  8.   date.setHours(date.getHours() + horasSeleccionadas)
  9.   hora_salida.value = formatDate(date) /
  10. }
  11.  
  12.  
  13. hora_entrada.addEventListener("change", actualizarSalida)
  14. horas.addEventListener("change", actualizarSalida)
  15.  
  16.  
  17. const formatDate = date => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getUTCDate())}`+
  18.     `T${pad(date.getHours())}:${pad(date.getMinutes())}`
  19.  
  20. const pad = val => ('0' + val).slice(-2)
__________________
yoclens avilan



La zona horaria es GMT -6. Ahora son las 13:30.