Я работаю с datetimepicker xdsoft: См. Документы , чтобы позволить пользователю выбрать дату и время бронирования.
У меня есть таблица 'fechas' в базе данных для хранения информации о даты, которые имеют заказы. Например, дата 2020/04/28 имеет бронирование на 7 вечера.
В этом конкретном указателе даты и времени у них есть функция 'setOptions', которая принимает массив 'параметров', который очень полезен для хранения доступных дат, а затем вызывает 'allowTimes' для передачи массива дат .
В настоящее время я могу изменить доступные часы, но они показывают для ранее выбранной даты, а не отображают соответствующие даты.
Когда пользователь нажимает кнопку "Отправить", доступные часы отображаются ниже. однако средство выбора даты и времени я хотел бы обновить часы, доступные каждый раз, когда пользователь нажимает на новую дату.
Вот файлы, с которыми я работаю при проверке . php
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
</head>
<body>
<form name="test-form" id="test-form" method="POST">
<div id="test-container" style="margin-top:100px;margin-left:100px;">
<p>Seleccione la fecha para verificar horarios</p>
<input type="text" name="test_day" class="test_day" id="test_day" placeholder="15 / 08 / 2018">
<input type="submit" id="test_submit" name="test_submit" value="Submit">
<div id="test_response" name="test_response"></div>
</div>
</form>
</body>
<link rel="stylesheet" type="text/css" href="datetimepicker/jquery.datetimepicker.css"/>
<script src="datetimepicker/jquery.js"></script>
<script src="datetimepicker/build/jquery.datetimepicker.full.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
<script src="test.js"></script>
</html>
тест. js
//Logica para la validacion y base de datos
var horas_disponibles = [];
$('#test_submit').click(function(e) {
e.preventDefault();
var fecha = $('#test_day').val();
var separados = fecha.split(" ");
var btn = $("#test_submit").val();
var respuesta = document.getElementById("test_response");
if(fecha)
{
$.ajax({
url: "test_fechas.php",
type: "POST",
data: {
'fecha' : separados[0],
'hora' : separados[1],
'btn' : btn
},
success: function(response) {
if(response)
{
if(response == "db-error")
{
respuesta.innerHTML = "<p>Error al conectarse a la base de datos</p>";
}
else if (response == "emptyFields")
{
respuesta.innerHTML = "<p>Faltan parametros</p>";
}
else if (response == "allDatesAvailable")
{
respuesta.innerHTML = "<p>Todas las fechas disponibles</p>";
}
else {
var db_ans = response.split(",");
var horas_normales = ["19:00", "19:30", "20:00","20:30"]; // Data 1 - frente a este comparamos
for (var i =0; i < horas_normales.length; i++)
{
var esIgual = false;
for (var j = 0; j < db_ans.length & !esIgual; j++)
{
if(horas_normales[i] == db_ans[j])
{
esIgual = true;
}
}
if(!esIgual)horas_disponibles.push(horas_normales[i]);
}
respuesta.innerHTML = "<p>Las horas disponibles son: " + horas_disponibles[0] + " " + horas_disponibles[1];
}
}
else {
respuesta.innerHTML = "<p>No hubo respuesta</p>";
}
}
});
}
});
$('#test_day').datetimepicker({
minDate: '-1970/01/01',
disabledWeekDays: [0,1,3,5,6],
onSelectDate: function(input, $input)
{
this.setOptions({
allowTimes: horas_disponibles
});
}
});
test_fechas. php
<?php
if(isset($_POST['btn']))
{
require_once("includes/dbh.inc.php");
require_once("includes/conexion.inc.php");
$fecha = $_POST['fecha'];
$hora = $_POST['hora'];
$btn = $_POST['btn'];
if (empty($fecha) || empty($hora))
{
echo "emptyFields";
exit();
}
else {
$sql = "SELECT * FROM fechas where fecha=?";
$stmt = mysqli_stmt_init($con);
if(!mysqli_stmt_prepare($stmt,$sql))
{
echo "db-error";
exit();
}
else {
$fecha = strtotime($fecha);
$formattedDate = date('Y-m-d', $fecha);
mysqli_stmt_bind_param($stmt, "s", $formattedDate);
mysqli_stmt_execute($stmt);
$results = mysqli_stmt_get_result($stmt);
if ($row = mysqli_fetch_assoc($results))
{
$horas_ocupadas = $row['horas'];
echo $horas_ocupadas;
}
else{
echo "allDatesAvailable";
exit();
}
}
}
}
else
{
header("Location: ../test.php");
}