0

Estoy usando datetimepicker para poder colocar un input donde se pueda ingresar una hora de entrada y una de salida. la vista seria asi:

<div class="bootstrap-timepicker">
<div class="form-group">
    <label>Hora Entrada</label>
    <div class="input-group date" id="timepicker" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#timepicker" id="time"/>
        <div class="input-group-append" data-target="#timepicker" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="far fa-clock"></i></div>
        </div>
    </div>
</div>
<input id="hora" name="hora" type="hidden" value="">

JS:

<script>
    $(function(){
        $('#timepicker').datetimepicker({
            format: 'HH:mm:ss',
            icons: {
                up: 'fa fa-chevron-up',
                down: 'fa fa-chevron-down'
            }
        });
    })
</script>

¿De que manera puedo tomar el valor que se obtenga al colocar una hora?, intenté capturar el valor de "timepicket" para asignarlo a un input hidden pero no lo muestra o mas bien no toma el valor, usé la sgte funcion:

    var hora = document.getElementById("hora");
    var timepicker = document.getElementById("timepicker");

    timepicker.onchange = function() {
        hora.value = timepicker.value;
        return false;
    }

Pd: estoy usando laravel 5.7 y bootstrap 4 Agradezco de antemano su ayuda y su tiempo de leer

2
  • ¿No seria más bien esto? var timepicker = document.getElementById("time");
    – masterguru
    Commented el 17 dic. 2021 a las 15:02
  • @masterguru al parecer el valor no se guarda en el input, por lo que no retorna nada :/ y aplicando la función que se muestra en la pregunta el valor que se le asigna a "hora" queda como "undefined" <input id="hora" name="hora" type="hidden" value="undefined"> Commented el 17 dic. 2021 a las 15:15

1 respuesta 1

1

Para poder capturar el valor debes modificar lo siguiente:

Paso 1: Agregar una nueva variable en el javascript, que denominaremos timeinput, de este modo:

var timeinput = document.getElementById("time");

Paso 2: Modificar esta linea

hora.value = timepicker.value;

por esta otra:

hora.value = timeinput.value;

Explicación:

Por un lado el elemento con el id timepicker contiene el input con el id time. Dicho elemento tambien contiene este atributo: data-target-input="nearest" que segun parece se refiere al input más cercano, en este caso el input con el id time.

Según parece, la libreria javascript de getdatepicker actualiza el input más cercano cuando esta en ejecución, por lo tanto, en este caso, está actualizando el input con el id time. Y es por ello que tambien debes usarlo en tu javascript para capturar su valor y aplicarlo al input escondido hora o lo que quieras hacer con el, tal y como he detallado más arriba.

Edición: He quitado el enlace malo de antes y he puesto un snippet en su lugar que aparece más abajo, donde hay un ejemplo válido de lo que acabo de responder para que puedas comprobarlo y verificarlo.

$(document).ready(function () { 
  $(function(){
      $('#timepicker').datetimepicker({
          format: 'HH:mm:ss',
          icons: {
              up: 'fa fa-chevron-up',
              down: 'fa fa-chevron-down'
          }
      });
  })
  var timeinput = document.getElementById("time");
  var hora = document.getElementById("hora");
  var timepicker = document.getElementById("timepicker");


  timepicker.onchange = function() {
      hora.value = timeinput.value;
      console.log(hora.value);
      return false;
  }
});
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/js/tempusdominus-bootstrap-4.min.js" integrity="sha512-k6/Bkb8Fxf/c1Tkyl39yJwcOZ1P4cRrJu77p83zJjN2Z55prbFHxPs9vN7q3l3+tSMGPDdoH51AEU8Vgo1cgAA==" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tempusdominus-bootstrap-4/5.39.0/css/tempusdominus-bootstrap-4.min.css" integrity="sha512-3JRrEUwaCkFUBLK1N8HehwQgu8e23jTH4np5NHOmQOobuC4ROQxFwFgBLTnhcnQRMs84muMh0PnnwXlPq5MGjg==" crossorigin="anonymous" />
</head>
<body>
<div class="bootstrap-timepicker">
<div class="form-group">
    <label>Hora Entrada</label>
    <div class="input-group date" id="timepicker" data-target-input="nearest">
        <input type="text" class="form-control datetimepicker-input" data-target="#timepicker" id="time"/>
        <div class="input-group-append" data-target="#timepicker" data-toggle="datetimepicker">
            <div class="input-group-text"><i class="far fa-clock"></i></div>
        </div>
    </div>
</div>
<input id="hora" name="hora" type="text" value="" disabled>
</body>
</html>

4
  • Muchas gracias por su respuesta, muy buena explicación :) Commented el 22 dic. 2021 a las 11:34
  • @WillyKickxer Gracias :-) Si consideras que esta respuesta responde a tu pregunta deberias aceptarla para que los demas visitantes puedan tambien ver que esta respondida correctamente y asi evitar dejar preguntas que parecen sin responder (que de tanto en tanto son relanzadas por el sistema de stackoverflow). Creo que hay un checkbox debajo de las flechas de valoración para eso (no lo se realmente, nunca he hecho una pregunta aun)
    – masterguru
    Commented el 22 dic. 2021 a las 11:39
  • @WillyKickxer Jolin, segun parece he sobreesrito el enlace que he puesto donde supuestamente encontrarias el codigo funcionandon con mis cambios, con otra cosa de otra pregunta, seré melón! Voy a quitarlo, perdona
    – masterguru
    Commented el 22 dic. 2021 a las 11:46
  • @WillyKickxer: Acabo de editar la respuesta quitando el enlace malo y poniendolo en un snippet (aunque queda un poco monstruoso con tanta llamada a los scripts).
    – masterguru
    Commented el 22 dic. 2021 a las 12:10

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.