0

Se tiene un input del tipo time sencillo como el siguiente ejemplo:

<input type="time" id="hora" step="1"/>

Me gustaria saber si es posible deshabilitar los minutos y los segundos, que estén siempre en 00:00, que solamente sea posible cambiar la hora. ¿Es posible, con javascript o jquery?

Dejo un ejemplo de aquello:

function AumentaHoras(){
  
  document.getElementById('hora').stepUp(3600);

}
#hora{
 border-style: solid;
 border-width: 1px;
 border-color: black;
 border-radius: 5px;
}
<input type="time" id="hora" step="1" value="00:00:00">

<button onclick="AumentaHoras()">Click me!</button>

Probando de esta manera, se logra que aumente de hora en hora, pero no deshabilita los minutos y los segundos.

<script type="text/javascript">
  function AuementaHoras(){
    document.getElementById('hora').stepUp(3600);
  }
<script>

Además al llegar a las 23:59:59 Hrs, si se sigue aumentando no se restablece a 00:00:00, y los minutos y segundos toman valores cuando deberían estar siempre en 00:00.

Pero si lo hago de este modo se cumple todo, excepto que no muestra los segundos, tampoco con javascript, en su propiedad .value="";

<input type="time" id="hora" step="3600"/>
2
  • 2
    si quieres un selector de horas por qué usar un input time?
    – LPZadkiel
    Commented el 10 dic. 2018 a las 15:16
  • Según he estado leyendo el input no soporta lo que necesitas que haga. Efectivamente con step puedes conseguir que los incrementos y decrementos de tiempo sean de una hora, pero entonces no te va a mostrar los segundos porque el navegador no lo ve necesario. Si necesitas que el input te muestre los segundos ya tendrías que jugar con un input text, añadiéndole tú unos botoncitos para que hagan de controles incrementales y decrementales y ser tú quien maneje el string resultante para simular el efecto que deseas conseguir.
    – phpMyGuel
    Commented el 10 dic. 2018 a las 15:17

1 respuesta 1

4

He logrado lo que deseas con el siguiente fragmento de código, espero que te sirva, sino comentame si tienes alguna dificultad, saludos:

        function AumentaHoras(){
          hora = document.getElementById('hora').value;
          if ( hora == undefined || hora != "23:00:00" ) {
            document.getElementById('hora').stepUp(3600);
          }else{
            document.getElementById('hora').value = "00:00:00";
          }
        }
      <input type="time" id="hora" step="1"/>

      <button onclick="AumentaHoras()">Click me!</button>

1
  • Amigo funciona muy bien aquello sólo que lo modifiqué un poco; además sigue permitiendo modificar los minutos y segundos; mi idea es utilizar los controles del input time para controlar las horas a la vez que se muestran los segundos. Si es posible.
    – M4uriXD
    Commented el 10 dic. 2018 a las 15:51

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.