JavaScript - modificar script para campo hora

 
Vista:
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por Eduardo (176 intervenciones) el 25/11/2021 20:35:20
Hola a todos... Gracias sismpre por su ayuda... Tengo el siguiente codigo para un campo donde se ingresa una hora...

El campo tiene la particularidad de poner el separador : (dos puntos) automaticamente entre la hora y los minutos.
y funciona pues hay que facilitar y permitir que esta se ingrese en el formato estandarizado siempre.

si se escribe una hora por ejemplo 10:38 no hay ningun problema el problema resulta al escribir por ejemplo 01:15
ya que hay que escribir el cero delante y es algo molesto..

lo ideal seria escribir or ejemplo 1:15 y automaticamente el codigo ponga el 0 (cero) delante para evitar que se termine ingresando 11:5

quien me da una manita a este codigo por favor...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<script>
function check(e) {
    validarHora(e);
    const hora1=document.getElementById("hora1").value;
    const hora2=document.getElementById("hora2").value;
    if (hora1.length==5 && hora2.length==5) {
        if (devolverMinutos(hora1)>devolverMinutos(hora2)) {
            alert("Hora de Salida es superior a la hora de Entrada");
        }
    }
}
function validarHora(e) {
    e.preventDefault();
    if (e.target.value.length>=5) {
        return;
    }
    if (e.target.value.length<5 && /[0-9]/.test(e.key)) {
        e.target.value+=e.key;
    }
    if (e.target.value.length==2) {
        e.target.value+=":";
    }
};
function devolverMinutos(horaMinutos) {
    return (parseInt(horaMinutos.split(":")[0])*60)+parseInt(horaMinutos.split(":")[1]);
}
</script>
<input name="hora1" type="text" required="required" onkeypress="check(event)" id="hora1" autocomplete="off" size="3" maxlength="5"/>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de 7aamin
Val: 9
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por 7aamin (79 intervenciones) el 26/11/2021 04:58:33
Realmente me da pereza ponerme a analizar código ajeno, pero de acuerdo a lo que pides, puedes hacerlo así:
Con un condicional validar si el número es menor a 10, entonces agregarle un cero antes. O puedes usar el formato en 24 horas.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por Eduardo (176 intervenciones) el 26/11/2021 18:16:58
jejej muy comprensible.... pero quien entiende aveces... si no pone uno codigo es malo y si no tambien... jejejej.. humanos teniamos que ser!!! jejejejje (broma) saludos!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por Alejandro (532 intervenciones) el 26/11/2021 17:07:44
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<script>
	function check(e) {
		validarHora(e);
		const hora1=document.getElementById("hora1").value;
		const hora2=document.getElementById("hora2").value;
		if (hora1.length==5 && hora2.length==5) {
			if (devolverMinutos(hora1)>devolverMinutos(hora2)) {
				alert("Hora de Salida es superior a la hora de Entrada");
			}
		}
	}
 
	function validarHora(e) {
		e.preventDefault();
		if (e.target.value.length>=5) {
			return;
		}
		if (e.target.value.length<5 && /[0-9]/.test(e.key)) {
			e.target.value+=e.key;
		}
		if( e.key==':' && e.target.value.length<2){
			e.target.value = e.target.value.padStart(2, '0')+e.key;
		}
		if (e.target.value.length==2) {
			e.target.value+=":";
		}
	};
 
	function devolverMinutos(horaMinutos) {
		return (parseInt(horaMinutos.split(":")[0])*60)+parseInt(horaMinutos.split(":")[1]);
	}
</script>
 
<input name="hora1" type="text" required="required" onkeypress="check(event)" id="hora1" autocomplete="off" size="3" maxlength="5"/>
<input name="hora1" type="text" required="required" onkeypress="check(event)" id="hora2" autocomplete="off" size="3" maxlength="5"/>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por Eduardo (176 intervenciones) el 26/11/2021 18:21:27
Mil Gracias... una consulta hay que si o si agregar el signo : (dos puntos) para hacer el cometido??.. pues en el script si notas los : (dos puntos) separador lo coloca automatico el campo... para asi no batallar en la marcha (simplificar el ingreso) y adicional a esto se estandariza el ingreso... en tu ejemplo toca agregarlos manualmente algo que para agilizar y estandarizar el tipo de datos en este campo seria util.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por Alejandro (532 intervenciones) el 26/11/2021 22:59:51
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Los dos puntos son automáticos, solo si requieres 1 dígito en la hora es necesario escribir los dos puntos para separar y también automáticamente te agrega el 0 a la izquierda.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de ScriptShow
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por ScriptShow (692 intervenciones) el 26/11/2021 18:18:29
Saludos Eduardo,

veamos un ejemplo entendible, compatible, adaptable, etc...

1
2
3
4
5
6
7
8
9
<input type="text" id="demo" onkeydown="test(this.value)">
 
<script>
function test(v) {
v = "";
if (v < 10) {v = "0" + v}
document.getElementById("demo").value = v;
}
</script>

Espero sea útil.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Eduardo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por Eduardo (176 intervenciones) el 26/11/2021 18:24:23
wow asi se lograria colocar el cero al ir escribiendo... como le adicionaria el resto.. pues el campo en el ejemploq ue planteas no me deja seguir adicionando mas caracteres.. y yo para simplificar el trabajo y estandarizar le puse que a medida que se escribe ingrese el separador : (dos puntos)

Graciasss por la ayuda
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de 7aamin
Val: 9
Ha aumentado su posición en 6 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

modificar script para campo hora

Publicado por 7aamin (79 intervenciones) el 26/11/2021 18:38:06
asi es.. tan sencillo como usar in IF..!! sin tanta vuelta
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar