43-opcion 1-coincide la fecha de inicio con la fecha de la base de datos

  Cómo Validar el Cruce de Fechas en un Sistema de Reservas (Opción 1)

Introducción:
¿Alguna vez has tenido que implementar un sistema de reservas y te encontraste con el desafío de validar la disponibilidad de fechas? En este post, te explico cómo manejar el cruce de fechas cuando un usuario intenta reservar y cómo mostrarle claramente si hay disponibilidad o no.

---

🔍 Validación de Cruce de Fechas - Opción 1

El objetivo es comparar la fecha ingresada por el usuario con las fechas ya registradas en la tabla reservas de la base de datos.

📌 Estructura de la Tabla reservas

sql

CREATE TABLE `reservas` (
  `fecha_ingreso` date NOT NULL,
  `fecha_salida` date NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

---

⚙️ ¿Cómo Funciona el Código?

Recorremos los registros de reservas con un ciclo for y comparamos la fecha del usuario con las fechas almacenadas:

javascript

for(var i = 0; i < respuesta.length; i++) {
    /* VALIDAR CRUCE DE FECHAS OPCIÓN 1 */
    if(fechaIngreso == respuesta[i]["fecha_ingreso"]) {
        opcion[i] = false; // ¡Hay coincidencia! No hay disponibilidad.
    } else {
        opcion[i] = true; // No hay conflicto, fecha disponible.
    }
    
    console.log("opcion[i]", opcion[i]);

    /* VALIDAR DISPONIBILIDAD */
    if(opcion1[i] == false) {
        validarDisponibilidad = false; // Marcar como no disponible.
    } else {
        validarDisponibilidad = true; // Seguir verificando.
    }
    
    console.log("validarDisponibilidad", validarDisponibilidad);
}

---

🚦 Lógica de Disponibilidad

• Si validarDisponibilidad = false:

  • Mostramos un mensaje de "No hay disponibilidad".

  • Pintamos las fechas ocupadas en el calendario (en color oscuro).

  • ¡Rompe el ciclo con break! (No necesitamos seguir verificando).

javascript

if(!validarDisponibilidad) {
    totalEventos.push({
        "start": respuesta[i]["fecha_ingreso"], 
        "end": respuesta[i]["fecha_salida"], 
        "rendering": 'background', 
        "color": '#847059' // Color gris/oscuro para fechas ocupadas.
    });

    $(".infoDisponibilidad").html('<h5 class="pb-5 float-left">Lo sentimos, no hay disponibilidad para esa fecha!<br><br><strong>¡Vuelve a intentarlo!</strong></h5>');
    break;
}

• Si validarDisponibilidad = true:

  • Pintamos las fechas de la base de datos (ocupadas).

  • Al final del ciclo, si todo está disponible, agregamos las fechas del usuario (en otro color).

javascript

if (validarDisponibilidad) {
    totalEventos.push({
        "start": fechaIngreso,  // Fecha de ingreso del usuario.
        "end": fechaSalida,      // Fecha de salida del usuario.
        "rendering": 'background',
        "color": '#FFCC29'       // Color amarillo/destacado.
    });
}

---

🎯 Conclusión

Este método asegura que:
✅ Las fechas ocupadas se muestren claramente.
✅ El usuario reciba un mensaje inmediato si no hay disponibilidad.
✅ Las fechas disponibles se resalten en el calendario.

💡 Pro Tip: Si necesitas optimizar más el proceso, considera usar consultas SQL directas para verificar disponibilidad antes de pintar el calendario.

---

📢 ¿Te gustó este método? ¡Déjame un comentario si quieres que profundice en otras opciones de validación!

Validación de Cruce de Fechas en un Sistema de Reservas (Opción 1) - Explicación Detallada

🔍 Objetivo

Validar si la fecha seleccionada por el usuario (fechaIngreso) coincide con alguna fecha ya reservada en la base de datos (reservas.fecha_ingreso).

• Si hay coincidencia (opcion1[i] = false):

  • validarDisponibilidad = false.

  • No se imprimen las fechas del usuario. Solo se muestran las fechas ocupadas (en gris).

  • Se muestra un mensaje de error y se rompe el ciclo (break).

• Si no hay coincidencia (opcion1[i] = true):

  • validarDisponibilidad = true.

  • Se pintan todas las fechas ocupadas de la BD (gris).

  • Al finalizar el ciclo for, si validarDisponibilidad sigue siendo true, se pintan las fechas del usuario (amarillo).

---

📌 Ejemplo Práctico

Tabla reservas (fechas ocupadas):

1. 2019-04-12

2. 2019-04-21

3. 2019-04-16

Fecha ingresada por el usuario:

• fechaIngreso = "2019-04-16"

---

🔄 Paso a Paso del Ciclo for

1. Primera Iteración (i = 0)

• Comparación:
  "2019-04-16" (usuario) == "2019-04-12" (BD) → false

• Resultados:

  javascript

  opcion1[0] = true;       // No hay coincidencia.
  validarDisponibilidad = true;  // Aún hay disponibilidad.

• ¿Qué se pinta?
  La fecha ocupada de la BD (gris):

  javascript

  totalEventos.push({
      start: "2019-04-12", 
      end: "2019-04-12",
      rendering: 'background',
      color: '#847059'  // Gris (ocupado).
  });

---

2. Segunda Iteración (i = 1)

• Comparación:
  "2019-04-16" (usuario) == "2019-04-21" (BD) → false

• Resultados:

  javascript

  opcion1[1] = true;
  validarDisponibilidad = true;  // Seguimos verificando.

• ¿Qué se pinta?
  Otra fecha ocupada de la BD (gris):

  javascript

  totalEventos.push({
      start: "2019-04-21", 
      end: "2019-04-21",
      color: '#847059'
  });

---

3. Tercera Iteración (i = 2)

• Comparación:
  "2019-04-16" (usuario) == "2019-04-16" (BD) → true

• Resultados:

  javascript

  opcion1[2] = false;      // ¡Hay coincidencia!
  validarDisponibilidad = false;  // No hay disponibilidad.

• Acción:

  • Se pinta la fecha conflictiva (gris):

    javascript

    totalEventos.push({
        start: "2019-04-16", 
        end: "2019-04-16",
        color: '#847059'
    });

  • No se pintan las fechas del usuario (porque validarDisponibilidad = false).

  • Mensaje de error y break:

    javascript

    $(".infoDisponibilidad").html("Lo sentimos, no hay disponibilidad para esa fecha.");
    break;  // Termina el ciclo.

---

🎨 ¿Qué se Pinta en Cada Caso?

Caso 1: validarDisponibilidad == false (Ejemplo anterior)

• Solo fechas de la BD (gris #847059).

• No se pintan las fechas del usuario (porque hay conflicto).

Caso 2: validarDisponibilidad == true (Sin coincidencias)

1. Dentro del ciclo for:

   • Se pintan todas las fechas ocupadas de la BD (gris).

   • No se pintan las fechas del usuario aún.

2. Fuera del ciclo for:

   • Si validarDisponibilidad sigue siendo true, se pintan las fechas del usuario (amarillo #FFCC29):

     javascript

     if (validarDisponibilidad) {
         totalEventos.push({
             start: fechaIngreso,  // Ej: "2019-04-25" (nueva fecha disponible).
             end: fechaSalida,
             rendering: 'background',
             color: '#FFCC29'     // Amarillo (disponible).
         });
     }

---

📝 Resumen Visual

Iteración	Fecha BD	¿Coincide?	validarDisponibilidad	Acción
1	2019-04-12	No	true	Pinta 2019-04-12 (gris).
2	2019-04-21	No	true	Pinta 2019-04-21 (gris).
3	2019-04-16	Sí	false	Pinta 2019-04-16 (gris) + break.

Si no hubiera coincidencia (ejemplo alternativo):

• Al final del ciclo, se pintaría la fecha del usuario en amarillo.

---

🔑 Conclusión

• validarDisponibilidad = false: Solo fechas de la BD (gris).

• validarDisponibilidad = true: Fechas de la BD (gris) + fechas del usuario al final (amarillo).

Este flujo garantiza que las fechas del usuario solo aparezcan como disponibles si superan todas las validaciones.