javascript - Disabling datetimepicker slots that are already booked

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

Solution:

HTML provides a standard Input Element with type datetime-local.

It provides the possibility to set a specific date and time for minimum and maximum. As I understood what you need is a picker that bounds certain days (like monday - friday) and certain times (between 9:00 and 16:00).

From what you provided (Before the edit), I think the default element is not able to manage that and you require a javascript datepicker with exactly that feature set.

Suggestion: Instead of creating a datepicker, maybe it is easier to render a dropdown of available dates, since you are providing them from the database already.