Как сделать форму выбора даты с отображением свободного и занятого времени?

Ссылка скопирована
HTML PHP SQL
1 ответ

В форму нужно добавить назначение даты и времени выезда мастера, при этом нужно, чтобы уже занятое время помечалось к примеру красным цветом. Каким образом можно осуществить это?

Дополнительно:

Видимо сначала нужно определиться как будет вообще отображаться "время", а там и появится понимание как закрашивать "занятое" время...

  • Фантастический вариант: изучить HTML, CSS, JS, PHP и SQL и сделать самостоятельно.
    Реалистичный вариант: нанять специалиста.

    • Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Андрей PHP Ответ

    Для создания формы выбора даты с отображением свободного и занятого времени можно воспользоваться следующим подходом:

    1. Создайте базу данных, в которой будет храниться информация о занятом времени. Например, таблица appointments с полями id, date, time, status (занято/свободно).

    2. Создайте форму на странице, где пользователь сможет выбрать дату. Для этого можно использовать элемент input типа date.

    3. При выборе даты с помощью JavaScript отправляйте AJAX запрос на сервер, чтобы получить информацию о занятом времени на выбранную дату.

    4. На сервере обработайте запрос и извлеките из базы данных информацию о занятом времени на выбранную дату.

    5. Отправьте обратно на клиент информацию о занятом времени.

    6. С помощью JavaScript обновите форму, добавив информацию о занятом и свободном времени на выбранную дату. Например, можно отобразить занятое время серым цветом, а свободное – зеленым.

    Пример кода на сервере (PHP):

    // Предположим, что у вас есть подключение к базе данных $db
 
$date = $_POST['date']; // Получаем выбранную дату из AJAX запроса
 
// Запрос к базе данных для получения информации о занятом времени на выбранную дату
$query = "SELECT time, status FROM appointments WHERE date = '$date'";
$result = mysqli_query($db, $query);
 
$appointments = [];
while ($row = mysqli_fetch_assoc($result)) {
    $appointments[$row['time']] = $row['status'];
}
 
echo json_encode($appointments);

    // Предположим, что у вас есть подключение к базе данных $db $date = $_POST['date']; // Получаем выбранную дату из AJAX запроса // Запрос к базе данных для получения информации о занятом времени на выбранную дату $query = "SELECT time, status FROM appointments WHERE date = '$date'"; $result = mysqli_query($db, $query); $appointments = []; while ($row = mysqli_fetch_assoc($result)) { $appointments[$row['time']] = $row['status']; } echo json_encode($appointments);

    Пример кода на клиенте (JavaScript):

    // AJAX запрос для получения информации о занятом времени на выбранную дату
let date = document.querySelector('#date').value; // Предполагается, что у вас есть элемент с id date
fetch('getAppointments.php', {
    method: 'POST',
    body: JSON.stringify({ date: date })
})
.then(response => response.json())
.then(data => {
    // Обновление формы с информацией о занятом и свободном времени
    Object.keys(data).forEach(time => {
        let status = data[time];
        let timeElement = document.querySelector(`#${time}`); // Предполагается, что у вас есть элемент с id равным времени
        timeElement.style.color = status === 'busy' ? 'grey' : 'green';
    });
});

    // AJAX запрос для получения информации о занятом времени на выбранную дату let date = document.querySelector('#date').value; // Предполагается, что у вас есть элемент с id date fetch('getAppointments.php', { method: 'POST', body: JSON.stringify({ date: date }) }) .then(response => response.json()) .then(data => { // Обновление формы с информацией о занятом и свободном времени Object.keys(data).forEach(time => { let status = data[time]; let timeElement = document.querySelector(`#${time}`); // Предполагается, что у вас есть элемент с id равным времени timeElement.style.color = status === 'busy' ? 'grey' : 'green'; }); });

    Таким образом, вы сможете создать форму выбора даты с отображением свободного и занятого времени, что поможет пользователям удобно планировать свои встречи и записи.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему подключение через VPN работает только на wi-fi, а через кабель нет, где ошибка? 0 ответов