1

Tengo una gran duda.... ¿Es posible realizar la validación entre rangos de tiempos en Javascript? Supongamos que a partir de este código:

<h3>Inserte la Fecha para los Ingresos</h3>
<input type ="Date" id="fecha">
<h3>Hora de Visita para el Ingreso 1</h3>

<input type="time" id="tiempo11">
<input type="time" id="tiempo12">

<h3>Hora de Visita para el Ingreso 2</h3>

<input type="time" id="tiempo21">
<input type="time" id="tiempo22">


<h3>Hora de Visita para el Ingreso 3</h3>

<input type="time" id="tiempo31">
<input type="time" id="tiempo32">

<br>
<br>
<br>

<button onclick="myFunction()">Reservar</button>

<p id="demo"></p>

<script>


</script>

Necesito que se valide que el rango de horas que para tiempo11 y tiempo12 no se cruce con tiempo21 y tiempo22, lo mismo para tiempo31 y tiempo32. O mejor aún si dentro de la etiqueta <p id="demo"></p>, se le notifique al usuario sobre no superponer estas horas para la fecha seleccionada. ¿Es posible hacerlo dentro del Javascript y mostrarlo inmediatamente? ó ¿tengo que programarlo desde el lenguaje del lado del servidor? (preferiblemente JSP o PHP). Y de ser posible en alguno de los dos casos ¿Cómo lo construirían?

Soy un muy novato para esto de la programación web. Ayuda...

1
  • Si quieres hacer la validación por javascript, te recomiendo que uses la clase Date para facilitar la validación de cruce de horas. Por otro lado también lo podrías hacer mediante un store procedure en tu base de datos, usando between que seria mucho mas fácil.
    – Fernando
    Commented el 13 jun. 2018 a las 22:50

3 respuestas 3

1

Mira el ejemplo que muestras se puede resolver así:

He simulado un entorno donde la hora de apertura es las 9:30 y la de cierre 21:00.

Primero validamos que todas las citas estén dentro de este horario.

Después validamos que las hora de entrada del 2º sea mayor o igual a la salida del 1º y que la de entrada del 3º sea mayor o igual a la salida del 2º.

Espero que te sirva.

const OPEN_HOUR = 9;
const OPEN_MINUTE = 30;

const CLOSE_HOUR = 21;
const CLOSE_MINUTE = 0;

const p = document.getElementById('demo');

function isValidHour(hour, minute) {
  return hour > -1 && hour < 24 && minute > -1 && minute < 60;
}

function validateDates(tiempo1, tiempo2) {
  if (tiempo1 && tiempo2 && tiempo1.value && tiempo2.value) {
    
    const now = new Date();
    const time1 = new Date(now);
    time1.setHours(tiempo1.value.split(':')[0])
    time1.setMinutes(tiempo1.value.split(':')[1])
    const time2 =new Date( now);
    time2.setHours(tiempo2.value.split(':')[0])
    time2.setMinutes(tiempo2.value.split(':')[1])
    // validamos que la fecha de ingreso sea menor que la de salida
    if (time1 < time2) {
      const open = new Date(now);
      open.setHours(OPEN_HOUR)
      open.setMinutes(OPEN_MINUTE);
      const close = new Date(now);
      close.setHours(CLOSE_HOUR);
      close.setMinutes(CLOSE_MINUTE);
      if (time1 >= open && time2 <= close) {
        p.innerHTML +='Éxito, hora de entrada y salida correcta';
        return true;
      } else {
        p.innerHTML +='Error, hora de entrada debe ser mayor que  '+ open.getHours()+ ':' + open.getMinutes() + ' y la salida menor que  '+ close.getHours()+ ':' + close.getMinutes();
      }

    } else {
     p.innerHTML +='Error, la hora de ingreso debe ser menor que la de salida';
    }
  } else {
   p.innerHTML +='Error, debes rellenar todos los datos';
  }
  return false;

}

function myFunction() {
  // Obtengo todos los inputs
  const tiempo11 = document.getElementById('tiempo11');
  const tiempo12 = document.getElementById('tiempo12');
  const tiempo21 = document.getElementById('tiempo21');
  const tiempo22 = document.getElementById('tiempo22');
  const tiempo31 = document.getElementById('tiempo31');
  const tiempo32 = document.getElementById('tiempo32');
  // valido el primer grupo
  const isValid1 = validateDates(tiempo11, tiempo12);
  const isValid2 = validateDates(tiempo21, tiempo22);
  const isValid3 = validateDates(tiempo31, tiempo32);
  
  // Todas estas fechas están dentro del horario de apertura 
  if(isValid1 && isValid2 && isValid3) {
    // valido que la hora de entrada del 2 sea mayor o igual que la hora de salida del primero, también que la hora de entrada del tercero sea mayor o igual que la salida del 3
     const salida1 = new Date();
    salida1.setHours(tiempo12.value.split(':')[0]);
    salida1.setMinutes(tiempo12.value.split(':')[1]);
    const entrada2 =new Date();
    entrada2.setHours(tiempo21.value.split(':')[0]);
    entrada2.setMinutes(tiempo21.value.split(':')[1]);
     const salida2 = new Date();
    salida2.setHours(tiempo22.value.split(':')[0]);
    salida2.setMinutes(tiempo22.value.split(':')[1]);
    const entrada3 =new Date();
    entrada3.setHours(tiempo31.value.split(':')[0]);
    entrada3.setMinutes(tiempo31.value.split(':')[1]);
    
    if(salida1 <= entrada2 && salida2  <= entrada3){
    console.log(salida1, entrada2, salida2, entrada3);
      p.innerHTML ='todo correcto';
    } else {
      p.innerHTML = 'La fecha de entrada del 2º debe ser mayor o igual a la de salida del 1º,y la de entrada del 3º debe ser mayor o igual que la salida del 2º';
    }
  }
}
<h3>Inserte la Fecha para los Ingresos</h3>
<input type ="Date" id="fecha">
<h3>Hora de Visita para el Ingreso 1</h3>

<input type="time" id="tiempo11">
<input type="time" id="tiempo12">

<h3>Hora de Visita para el Ingreso 2</h3>

<input type="time" id="tiempo21">
<input type="time" id="tiempo22">


<h3>Hora de Visita para el Ingreso 3</h3>

<input type="time" id="tiempo31">
<input type="time" id="tiempo32">

<br>
<br>
<br>

<button onclick="myFunction()">Reservar</button>

<p id="demo"></p>

<script>


</script>

1

Existen 6 casos en los que puede haber conflicto. Sabiendo esto, puedes hacer esa validacion en javascript asi:

function myFunction() {
  document.getElementById("demo").innerHTML = "";
  var tiempo11 = document.getElementById("tiempo11").value;
  var tiempo12 = document.getElementById("tiempo12").value;
  var tiempo21 = document.getElementById("tiempo21").value;
  var tiempo22 = document.getElementById("tiempo22").value;
  var tiempo31 = document.getElementById("tiempo31").value;
  var tiempo32 = document.getElementById("tiempo32").value;
  
  if ((tiempo11 > tiempo21 && tiempo11 < tiempo22) || 
        (tiempo11 > tiempo31 && tiempo11 < tiempo32) || 
          (tiempo21 > tiempo31 && tiempo21 < tiempo32) || 
            (tiempo21 > tiempo11 && tiempo21 < tiempo12) || 
              (tiempo31 > tiempo21 && tiempo31 < tiempo22) || 
                (tiempo31 > tiempo11 && tiempo31 < tiempo12)) {
    document.getElementById("demo").innerHTML = "Los rangos tienen conflicto";
  } 
}
<h3>Inserte la Fecha para los Ingresos</h3>
<input type ="Date" id="fecha">
<h3>Hora de Visita para el Ingreso 1</h3>

<input type="time" id="tiempo11">
<input type="time" id="tiempo12">

<h3>Hora de Visita para el Ingreso 2</h3>

<input type="time" id="tiempo21">
<input type="time" id="tiempo22">


<h3>Hora de Visita para el Ingreso 3</h3>

<input type="time" id="tiempo31">
<input type="time" id="tiempo32">

<br>
<br>
<br>

<button onclick="myFunction()">Reservar</button>

<p id="demo"></p>

1

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.

0

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.