JavaScript - Campo de Hora no deja digitar algunas

 
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

Campo de Hora no deja digitar algunas

Publicado por Eduardo (173 intervenciones) el 10/03/2020 18:00:55
Hola a todos hace un mes un gran Colaborador de este foro me envío este script el cual sirve para poner en un campo de texto la forma Hora HH:MM en ese formato a medida que se va escribiendo...

pero pasa algo que no me di cuenta hasta ahora.

es que al escribir Horas no me deja escribir las horas de las 16:00 a las 19:00

es decir me permite por ejemplo digitar 12:30 o 14:20 o 15:00 pero no me deja terminar las 16.. ni las 17.. 18.. o 19..

pero luego si me deja del 20 al 23.... o antes del 16...

que hay que modificarle o adicionarle para que deje escribir las horas sin problema Muchas Gracias!!

acá dejo el Script...

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
Hora: <input type="text" class="hora" size="5" autofocus />
<script>
	document.querySelector('.hora').addEventListener('keypress',validateHour);
	document.querySelector('.hora').addEventListener('blur',formatHour);
 
	function validateHour(e){
		e.preventDefault();
		if ( !isNaN(e.key) || e.key==':' ) {
			var position = this.selectionStart;
			var text = this.value;
			var textStart = text.substr(0,position);
			var textEnd   = text.substr(this.selectionEnd);
 
			if ( (textStart+textEnd).search(':')!=-1 && e.key==':' ) return;
			var textNew = textStart + e.key + textEnd;
			textNew = textNew.replace(':','');
			if ( textNew.length>2 ){
				textStart = textNew.substr(0,textNew.length-2);
				textEnd   = textNew.substr(-2);
				textNew = textStart + ':' + textEnd;
				position++;
			} else if ( textNew>59 ) {
				textStart = textNew.substr(0,1);
				textEnd   = textNew.substr(1);
				textNew = textStart + ':' + textEnd;
				position++;
			}
 
			var textPart=textNew.split(':');
 
			if ( textPart.length == 2 && textPart[0]>23 || textPart[1]>59 ) return;
 
			this.value = textNew;
 
			this.selectionStart = position+1;
			this.selectionEnd = position+1;
		}
	}
 
	function formatHour(){
		var text = this.value;
		if ( text!="" ) {
			textPart = text.split(':');
 
			if ( textPart.length == 2 ) {
				textPart[0]=textPart[0].padStart(2,'0');
				textPart[1]=textPart[1].padStart(2,'0');
			} else {
				textPart.push(textPart[0].padStart(2,'0'));
				textPart[0]='00';
			}
			this.value=textPart.join(':');
		}
	}
</script>
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 Alejandro
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Campo de Hora no deja digitar algunas

Publicado por Alejandro (532 intervenciones) el 11/03/2020 00:45:24
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
jajajajaja Recuerdo haber dicho que era seguro que tenia falla, ese código lo había hecho a la rápida, la intención era que le pensaras un poquito.

Este ya esta corregido y le dedique un tiempo considerable. Si aun encuentras errores, me los haces ver.
Validar hora mientras se va escribiendo.
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 Eduardo Arroyo
Val: 159
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Campo de Hora no deja digitar algunas

Publicado por Eduardo Arroyo (173 intervenciones) el 11/03/2020 00:49:50
Mil Gracias y pues excelente a mi me sirvio de mucho pero Muchas gracias... ya ire a revisar
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

Campo de Hora que verifique rangos entre ellas

Publicado por Eduardo (173 intervenciones) el 11/03/2020 14:55:01
Hola si Funcionó.. Mil Gracias.. he agregado un segundo campo para agregar Hora Inicial y Hora Final a lo cual quería saber como se puede implementar una función que verifique que la Hora Final (hora2) no sea Mayor a la Hora Inicial (hora1) y que al colocar por ejemplo una hora que cumpla esta condición (hora1: 14:18 - Hora Final: 20:30) salga un mensaje tipo alert (al instante) que diga "Verifique el rango de las horas ingresada" acá pongo el código que ya hemos implementado con el nuevo campo funcional:

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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
Hora Inicial: <input name="hora1" type="text" autofocus class="hora1" id="hora1" size="5" />
Hora Final: <input name="hora2" type="text" autofocus class="hora2" id="hora2" size="5" />
<script>
	document.querySelector('.hora1').addEventListener('keypress',validateHour);
	document.querySelector('.hora1').addEventListener('blur',formatHour);
	document.querySelector('.hora2').addEventListener('keypress',validateHour);
	document.querySelector('.hora2').addEventListener('blur',formatHour);
 
	function validateHour( e )
	{
		e.preventDefault( );
		if ( !isNaN(e.key) || e.key==':' )
		{
			var position  = this.selectionStart;
			var text      = this.value;
			var textStart = text.substr(0,position);
			var textEnd   = text.substr(this.selectionEnd);
			var textNew;
 
			if ( e.key != ':' || ( e.key == ':' && (textStart+textEnd).search(':') == -1 ) )
			{
				textNew = textStart + e.key + textEnd;
 
				if ( textNew.search(':') != -1 )
				{
					var aText = textNew.split(':');
					textStart = aText[0];
					textEnd   = aText[1];
					if( textStart<24 && textEnd<60 )
					{
						if ( e.key == ':' && textStart.length < 2 )
						{
							if ( textStart.length == 0 )
							{
								position++;
							}
							textStart = textStart.padStart(2, '0');
							position++;
						}
						textNew = textStart + ':' + textEnd;
					}
					else
					{
						return;
					}
				}
				else
				{
					switch( textNew.length )
					{
						case 1:
							break;
 
						case 2:
							if ( textNew >= 24 )
							{
								textNew = '00:' + textNew;
								position = 4;
							}
							else if ( e.key == ':' )
							{
								textNew = textNew + ':';
								position++;
							}
							break;
 
						case 3:
							if ( textNew.substr(0, 2) < 24 && textNew.substr(2, 1) < 60 )
							{
								textNew = textNew.substr(0, 2) + ':' + textNew.substr(2, 1);
							}
							else if ( textNew.substr(0, 1) < 24 && textNew.substr(1, 2) < 60 )
							{
								textNew = textNew.substr(0, 1).padStart(2, '0') + ':' + textNew.substr(2, 1);
							}
							else
							{
								return;
							}
							position++;
							break;
 
						case 4:
							if ( textNew.substr(0, 2) < 24 && textNew.substr(2, 2) < 60 )
							{
								textNew = textNew.substr(0, 2) + ':' + textNew.substr(2, 2);
								position++;
							}
							else
							{
								return;
							}
							break;
 
						default:
							return false;
 
					}
				}
				if ( textNew.length <= 5 )
				{
					this.value = textNew;
 
					this.selectionStart = ++position;
					this.selectionEnd   = this.selectionStart;
				}
			}
		}
	}
 
 
 
	function formatHour()
	{
		var text = this.value;
		if ( text != "" )
		{
			textPart = text.split(':');
 
			if ( textPart.length == 2 )
			{
				textPart[0] = textPart[0].padStart(2, '0');
				textPart[1] = textPart[1].padStart(2, '0');
			}
			else
			{
				switch ( text.length )
				{
					case 1:
					case 2:
						textPart[0] = 0;
						textPart.push(text);
						break;
 
					case 3:
						if ( text.substr(0, 1)<24 && text.substr(1, 2)<60 )
						{
							textPart[0] = text.substr(0, 1);
							textPart.push(text.substr(1, 2));
						}
						else if ( text.substr(0, 2)<24 && text.substr(2, 1)<60 )
						{
							textPart[0] = text.substr(0, 2);
							textPart.push(text.substr(2, 1));
						}
						break;
 
					case 4:
						textPart[0] = text.substr(0, 2);
						textPart.push(text.substr(2, 2));
						break;
				}
			}
			if ( textPart.length == 2 )
			{
				textPart[0] = String(textPart[0]).padStart(2, '0');
				textPart[1] = String(textPart[1]).padStart(2, '0');
				this.value = textPart.join(':');
			}
			else
			{
				this.value = '';
			}
		}
	}
</script>
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

Campo de Hora que verifique rangos entre ellas

Publicado por Alejandro (532 intervenciones) el 11/03/2020 19:27:25
  • Alejandro se encuentra ahora conectado en el
  • chat de PHP
Te dejo un ejemplo para que tu lo adaptes
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
36
37
38
39
40
41
42
43
44
45
Hora Inicial:	<input type="text" size="5" id="txtHraIni" /><br />
Hora Final: 	<input type="text" size="5" id="txtHraFin" />
 
<script>
	document.getElementById('txtHraIni').addEventListener('change',validarHora);
	document.getElementById('txtHraFin').addEventListener('change',validarHora);
 
	function validarHora()
	{
		cHraIni = document.getElementById('txtHraIni').value;
		cHraFin = document.getElementById('txtHraFin').value;
 
		if ( cHraIni != '' && cHraFin != '' )
		{
			dHraIni = new Date( );
			dHraFin = new Date( dHraIni );
 
			aHraIni = cHraIni.split( ':' );
			dHraIni.setHours( aHraIni[0] );
			dHraIni.setMinutes( aHraIni[1] );
 
			aHraFin = cHraFin.split( ':' );
			dHraFin.setHours( aHraFin[0] );
			dHraFin.setMinutes( aHraFin[1] );
 
			switch (true)
			{
				case ( dHraIni < dHraFin ):
					alert( 'La hora inicial es menor a la hora final.' );
					break;
 
				case ( dHraIni > dHraFin ):
					alert( 'La hora inicial es mayor a la hora final.' );
					break;
 
				case ( dHraIni.getTime() == dHraFin.getTime() ):
					alert( 'Las hora inicial es igual a la hora final.' );
					break;
 
				default:
					alert( 'Error de comparación' );
			}
		}
	}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
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

Campo de Hora que verifique rangos entre ellas

Publicado por Eduardo (173 intervenciones) el 11/03/2020 20:29:44
si funciona pero como hago para poner un focus o una indicación en el campo que corresponde o mejor aun hacer algo para que hasta que no se cambien la hora como es correcta, el sistema deje de sacar la alerta, pues hay un problema al cerrar la ventana de alarta ya el sistema prosigue como si nada.. la idea es obligar a revisar las horas agregadas y a ponerlas adecuadamente
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