Hola a todos tengo sistema de citas y necesito quitar las horas que ya no se encuentran disponibles en base de datos segun el dia que seleccione el usuario es decir de 10:00 am - 11:00 am el dia 2024-03-06 se encuentra asignada el usuario puede buscar en los dias siguientes para verificar que este libre y asignarsela pero no logro realizarlo, este es mi codigo javascript actual , llevo rato tratando de buscar una solucion pero siempre se me borra todo el select por mas que trate de que el usuario busque esa hora libre disponible en otro dia del input date pero siempre sale vacio , si pueden ayudarme a verificar el codigo y saber cual es el problema seria increible, en la tabla de base de datos las columnas son time y fecha debo buscar las horas disponibles segun la fecha
var xhr = new XMLHttpRequest();
var selectFecha = document.getElementById("fechaInput");
var selectHoras = document.getElementById("horaInput");
xhr.open("GET", "consulta.php", true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// Parsea la respuesta JSON
var horasRegistradas = JSON.parse(xhr.responseText);
// Obtiene la fecha seleccionada por el usuario
var fechaSeleccionada = new Date(selectFecha.value);
// Itera sobre las opciones del select de horas
var options = selectHoras.querySelectorAll("option");
options.forEach(function(option) {
// Si la opción no es la predeterminada, se verifica si debe eliminarse
if (option.value !== "") {
// Obtiene la hora de la opción y la convierte en un objeto Date
var horaOption = new Date(fechaSeleccionada.toDateString() + " " + option.value);
// Itera sobre las horas registradas
var ocupado = false;
horasRegistradas.forEach(function(registro) {
var fechaHoraRegistrada = new Date(registro.fecha + 'T' + registro.time);
if (fechaHoraRegistrada.getTime() === horaOption.getTime()) {
// La hora está ocupada, se marca como ocupado y se sale del bucle
ocupado = true;
return;
}
});
// Si la hora no está ocupada, se elimina la opción
if (!ocupado) {
option.remove();
}
}
});
}
};
xhr.send();
y este es mi codigo php actual
<?php
// Realiza la conexión a la base de datos
$conexion = new mysqli("localhost", "root", "", "suit");
// Verifica la conexión
if ($conexion->connect_error) {
die("Error en la conexión: " . $conexion->connect_error);
}
// Obtener la fecha seleccionada enviada por el cliente
$fechaSeleccionada = $_GET['fechaSeleccionada'];
// Consulta SQL para obtener las horas disponibles para la fecha seleccionada
$sql = "SELECT time FROM quotes WHERE fecha = '$fechaSeleccionada'";
// Ejecuta la consulta
$resultado = $conexion->query($sql);
// Array para almacenar las horas disponibles
$horasDisponibles = array();
// Obtiene las horas disponibles y las almacena en el array
while ($fila = $resultado->fetch_assoc()) {
$horasDisponibles[] = $fila['time'];
}
// Retorna el array como JSON
echo json_encode($horasDisponibles);
// Cierra la conexión
$conexion->close();
?>