Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/10/2018, 13:41
Avatar de aviweb2015
aviweb2015
 
Fecha de Ingreso: abril-2016
Ubicación: venezuela
Mensajes: 215
Antigüedad: 8 años
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