Código de JavaScript - Input para permitir la entrada de una hora con minutos HH:MM

Pos: 1

Val: 3.506

Ha mantenido su posición en JavaScript (en relación al último mes)

Input para permitir la entrada de una hora con minutos HH:MM

JavaScript

(4)

Publicado el 4 de Febrero del 2021 por Joel (150 códigos)

2.171 visualizaciones desde el 4 de Febrero del 2021

Esta función de javascript solo permite la entrada en el input de una hora con minutos con el formato HH:MM.
No permite introducir una hora superior a las 23:59

Versión con evento onkeypress

Publicado el 4 de Febrero del 2021

189 visualizaciones desde el 4 de Febrero del 2021

Versión con evento addEventListener
(4)

Publicado el 4 de Febrero del 2021

gráfica de visualizaciones de la versión: Versión con evento addEventListener

1.983 visualizaciones desde el 4 de Febrero del 2021

Hora Inicio: <input name="hora1" type="text" maxlength="5" class="hora">

Hora Final: <input name="hora2" type="text" maxlength="5" class="hora">

<script>

document.querySelectorAll(".hora").forEach(el => el.addEventListener("keypress", setHora));

function setHora(e) {

    e.preventDefault();

    if (this.value.length==2) {

        this.value+=":";

    // verificamos que el valor no supere los 5 caracteres,

    // que sea un numero y que no supere las 24:59

    if (this.value.length>=5 || /[0-9]/.test(e.key)==false ||

        (this.value.length==0 && e.key>2) ||

        (this.value.length==1 && e.key>3) ||

        (this.value.length==3 && e.key>5)

) {

        return;

    this.value+=e.key;

</script>

Comentarios sobre la versión: Versión con evento addEventListener (4)

Eduardo

4 de Febrero del 2021

Hola Gracias por responder.. el código presenta alguna falla pues no me deje escribir los números...

Responder

joel

4 de Febrero del 2021

Recuerda que la hora no puede ser superior a 23 y los minutos no pueden ser superiores a 59... por lo que si nada mas empezar pones un 3 no te lo mostrara!!

Responder

Eduardo

4 de Febrero del 2021

si pero en la mañana (aca en el caro de Colombia) las horas am van desde las 01 a 12 am luego pm 13 a 23 en el ejemplo veo que no me deja agregar horas iniciales solo de 10 en adelante...

Responder

joel

4 de Febrero del 2021

Que extraño Eduardo, yo si puedo poner la hora 00:00 o 01:01

Responder

Comentar la versión: Versión con evento addEventListener

http://lwp-l.com/s6861

Ordenar utilizando el método de inserción en Javascript

Habilitar y deshabilitar un enlace con Javascript

Código de JavaScript - Input para permitir la entrada de una hora con minutos HH:MM

Versión con evento onkeypress

Versión con evento addEventListener(4)

Comentarios sobre la versión: Versión con evento addEventListener (4)

Comentar la versión: Versión con evento addEventListener

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Versión con evento addEventListener
(4)