Disabling datetimepicker slots that are already booked

I’ve modified my datetimepicker calendar so that a user can pick a date and a time every hour between 9:00-16:00 during the week.

A user can pick a date/time slot, say 22-07-2020 at 11:00. This is then posted to a MySql database where it is stored alongside the user’s name, email etc.

I’m new to datetimepicker, I’ve mainly developed in PHP. I’ve been researching the best way to block, or disable a date/time slot that has already been booked (Like 22-07-2020 at 11:00).

From my research, datetimepicker has no built in functions for disabling specific date/time slots. So I am wondering:

1. Is datetimepicker the best tool I should be using? Before I try to figure out a solution for my problem. (Datetimepicker seems to be well thought off.)
2. I have began developing a PHP array that grabs all the datetime data from the database table then checks that against a user’s entered datetime, however, I acknowledge that I probably need this in a JavaScript array. Logically, I would like the user to be alerted that their selected datetime slot isn’t free (if there isn’t a way of disabling certain datetime).

So basically, is there a better way other than datetimepicker and is my logic fair for point 2?

Thanks all,

Jonny

Edit, below is my attempt.

//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 Code:

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

var disabletime = ["07/21/2020:11", "07/21/2020:0", "07/21/2020:17"]; //your dates from database with only hr
function formatDate(datestr)
{
    var date = new Date(datestr);
    var day = date.getDate(); 
    day = day>9?day:"0"+day;
    var month = date.getMonth()+1; month = month>9?month:"0"+month;
    return month+"/"+day+"/"+date.getFullYear();
}

$("input").datetimepicker({
    format: 'DD/MM hh:ii',
    autoclose: true,
    onRenderHour:function(date){
  if(disabletime.indexOf(formatDate(date)+":"+date.getUTCHours())>-1)
    {
        return ['disabled'];
    }
    }
});

<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>
<script src="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://rawgit.com/AuspeXeu/bootstrap-datetimepicker/master/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
  <input />