时间戳

首页 > 解决方案 > 禁用已预订的 datetimepicker 插槽

javascript - 禁用已预订的 datetimepicker 插槽

问题描述

我修改了我的 datetimepicker 日历，以便用户可以在一周中的 9:00-16:00 之间每小时选择一个日期和时间。

用户可以选择一个日期/时间段，例如22-07-2020 的 11:00。然后将其发布到 MySql 数据库中，并与用户名、电子邮件等一起存储。

我是 datetimepicker 的新手，我主要用 PHP 开发。我一直在研究阻止或禁用已预订的日期/时间段的最佳方法（例如22-07-2020 at 11:00）。

根据我的研究，datetimepicker 没有用于禁用特定日期/时间段的内置函数。所以我想知道：

  1. datetimepicker 是我应该使用的最佳工具吗？在我尝试为我的问题找出解决方案之前。（日期时间选择器似乎经过深思熟虑。）
  2. 我已经开始开发一个 PHP 数组，它从数据库表中获取所有日期时间数据，然后根据用户输入的日期时间进行检查，但是，我承认我可能需要在 JavaScript 数组中使用它。从逻辑上讲，我希望提醒用户他们选择的日期时间段不是空闲的（如果没有禁用某些日期时间的方法）。

所以基本上，除了 datetimepicker 之外还有更好的方法吗？我的逻辑对第 2 点是否公平？

谢谢大家，

强尼

编辑，下面是我的尝试。

//Get dates and times of bookings in database
$getAppointments = "SELECT `appointmentID`, `date`, `name`, `email`, `mobile`, `productType`, `appointmentReason`, `reminderText`, `reminderEmail` FROM `appointmentBooker`";
$getAppointmentsResult = mysqli_query($conn, $getAppointments);



//get all the bookings from the db.. then store them all in an array - the aim is diasble already booked appointments from the calender using data array..
$appointmentsArray = array();
if (mysqli_num_rows($getAppointmentsResult) > 0){
    while ($row = mysqli_fetch_assoc($getAppointmentsResult)) {
        $dateTime = $row["date"];
        array_push($appointmentsArray,$row['date']);
    }
}
//Disable dates/times based on array of datetimes

日期选择器代码：

<script>
    var dateToday = new Date(); 
    var hour = dateToday.getHours();

        jQuery(function($) {
            $("#datepicker").datetimepicker({
                //set office hours
                timeFormat: 'HH:00',
                hour: hour+1,
                stepping: 15,
                beforeShowDay: $.datepicker.noWeekends,
                minTime: '09:00:00',
                maxTime: '16:00:00',
                dateFormat: 'dd-mm-yy',
                minuteStep: 15,
                minDate: dateToday
                
            });
        });

标签： javascriptphpjquerydatetimepicker

解决方案

HTML 提供了一个标准的 Input Element 类型datetime-local。

它提供了为最小值和最大值设置特定日期和时间的可能性。据我了解，您需要的是一个限定特定日期（如星期一至星期五）和特定时间（9:00 至 16:00 之间）的选择器。

根据您提供的内容（在编辑之前），我认为默认元素无法管理它，您需要一个具有该功能集的 JavaScript 日期选择器。

建议：与其创建日期选择器，不如呈现可用日期的下拉列表更容易，因为您已经从数据库中提供它们。

推荐阅读