提问者:小点点

禁用已预订的datetimepicker插槽


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

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

我是datetimepicker的新手,我主要是用PHP开发的。 我一直在研究阻止或禁用已经预定的日期/时段的最佳方法(比如22-07-202011:00)。

根据我的研究,datetimepicker没有内置功能来禁用特定的日期/时间槽。 所以我想知道:

  1. datetimepicker是我应该使用的最佳工具吗? 在我想出解决问题的办法之前。 (Datetimepicker似乎是经过深思熟虑的。)
  2. 我已经开始开发一个PHP数组,它从数据库表中获取所有的datetime数据,然后根据用户输入的datetime进行检查,然而,我承认在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

Datepicker代码:

<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
                
            });
        });

共2个答案

匿名用户

HTML提供了类型为datetime-local的标准输入元素。

它提供了为最小值和最大值设置特定日期和时间的可能性。 正如我所理解的,您需要的是一个选择器,限制某些天(如周一-周五)和某些时间(在9:00和16:00之间)。

从您提供的内容(在编辑之前)来看,我认为缺省元素无法管理该功能,您需要一个具有该功能集的javascript datepicker。

建议:与其创建datepicker,也许呈现可用日期的下拉列表更容易,因为您已经从数据库中提供了这些日期。

匿名用户

null

var dates = ["20/07/2020", "21/07/2020", "22/07/2020", "23/07/2020"]; //your database date come here
 
function DisableDates(date) {
    var string = jQuery.datepicker.formatDate('dd/mm/yy', date);
    return [dates.indexOf(string) == -1];
}
 
$(function() {
     $("input").datepicker({
         beforeShowDay: DisableDates
     });
});
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  
  <input>