Se puede hacer perfectamente en el browser.
Primero, el valor de los inputs de tipo time es del tipo HH:mm
.
Yo partiría haciendo una función que compruebe si un valor está contenido dentro del rango definido por otros dos:
function isbetween(timeini,timefin, time) {
return time>timeini && time<timefin;
}
De manera que capturando los valores del primer intervalo, digamos 01:01
y 02:02
podrías comprobar si el valor 01:30
es mayor a 01:01
y menor a 02:02
(lo que en este caso es cierto).
Aunque la comparación por strings en este caso funciona, yo encuentro que sería más ordenado convertir todo a segundos, multiplicando la hora por 3600 y los minutos por 60. Para eso haces una función:
function toSeconds(time) {
var hrs=time.split(':')[0],
min=time.split(':')[1],
secs = hrs*3600 + min*60;
return secs;
}
Tu función de comprobación, entonces, debe capturar los valores de todos los inputs y usar is_between
para verificar que:
- El inicio del intervalo2 no esté en el intervalo1
- El final del intervalo2 no esté en el intervalo1
- Lo mismo para el 3 vs el 1
- Lo mismo para el 3 vs el 2
Te dejo un ejemplo que, sin embargo, tiene una salvedad (que pongo al final)
function toSeconds(time) {
var hrs=time.split(':')[0],
min=time.split(':')[1],
secs = hrs*3600 + min*60;
return secs;
}
function isbetween(timeini,timefin, time) {
return time>timeini && time<timefin;
}
function myFunction() {
var demo=document.getElementById('demo')
tiempo11=document.getElementById('tiempo11').value,
tiempo12=document.getElementById('tiempo12').value,
tiempo21=document.getElementById('tiempo21').value,
tiempo22=document.getElementById('tiempo22').value,
tiempo31=document.getElementById('tiempo31').value,
tiempo32=document.getElementById('tiempo32').value,
secs11=toSeconds(tiempo11),
secs12=toSeconds(tiempo12),
secs21=toSeconds(tiempo21),
secs22=toSeconds(tiempo22),
secs31=toSeconds(tiempo31),
secs32=toSeconds(tiempo32);
if(isbetween(secs11,secs12,secs21) || isbetween(secs11,secs12,secs22)) {
demo.innerHTML='El intervalo 2 se superpone con el primer intervalo';
}
}
div {
margin: 4px;
}
label {
font-weight:bold;
font-size:17px;
margin-right:10px;
}
<div>
<label>Inserte la Fecha para los Ingresos</label>
<input type ="Date" id="fecha">
</div>
<div>
<label>Hora Ingreso 1</label>
<input type="time" id="tiempo11" value="01:01">
<input type="time" id="tiempo12" value="02:20">
</div>
<div>
<label>Hora Ingreso 2</label>
<input type="time" id="tiempo21" value="01:30">
<input type="time" id="tiempo22" value="03:50">
</div>
<div>
<label>Hora Ingreso 2</label>
<input type="time" id="tiempo31" value="14:40">
<input type="time" id="tiempo32" value="15:45">
</div>
<br>
<button onclick="myFunction()">Reservar</button>
<p id="demo"></p>
Pero hay otro caso a contemplar: si el periodo 2 contiene al 1 (empieza antes y termina después) entonces no se cumple que el 2 tope con el 1 (usando la función isbetween
) pero sí se cumple que el 1 topa con el 2. Te dejo de tarea implementar una solución que asegure que:
- El periodo 2 no empieza ni termina dentro del periodo 1
- El periodo 2 no contiene al periodo 1
- El periodo 3 no empieza ni termina dentro del periodo 2 ni el 1
- El periodo 3 no contiene al periodo 2 ni al 1
Aunque la prioridad es arbitraria, este enfoque asume que el periodo 1 siempre tiene prioridad, y los otros dos deben adaptarse a él.
Hay una última comprobación, que es un poco obvia, que es validar que un período no termine antes de su hora de inicio.