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>
var timepicker = document.getElementById("time");