'Disable specific times on a specific date using jQuery DateTimePicker

I am trying to disable specific times for specific dates using the jQuery DateTimePicker like this:

jQuery('#datetimepicker').datetimepicker({
    disabledDates: ['27/04/2022 14:00'],
    format:'d/m/Y H:i'
});

However, this does not work. I can either only disable specific times for every day, or disable specific dates.

Solution 1:^[1]

Ok I actually managed to figure this out myself. I'm using PHP, but you can essentially just use any multidimensional array and JSON encode it.

$times[]=[
    '2022-04-28'=>[
        'hour' => 10,
        'minute' => 30
    ]
];
$times[]=[
    '2022-04-28'=>[
        'hour' => 11,
        'minute' => 15
    ]
];
$times[]=[
    '2022-04-29'=>[
        'hour' => 13,
        'minute' => 30
    ]
];

$dates=json_encode($times);

Once you have your list of dates and times you can use the onGenerate() function to loop through your dates and add a disabled class to the specific times.

jQuery('#datetimepicker').datetimepicker({
    lang:'en',
    format:'Y-m-d H:i',
    formatDate:'Y-m-d',
    step:15,
    onGenerate: function(ct, $i){
        var date=moment(ct).format('Y-MM-D');
        var datesArray=<?echo $dates;?>;

        $.each(datesArray, function(i, dates){
            if(date in dates){
                var times=dates[date];
                $.each(times, function(index, time){
                    var hour=times['hour'];
                    var minute=times['minute'];
                    var $object=$('[data-hour="' + hour + '"][data-minute="' + minute + '"]');
                    $object.addClass('xdsoft_disabled');
                });
            }
        });
    }
});

Please note: you will need to use the exact same date format for your array and jQuery function. Also, my step is set to 15 minute increments. So this only disables that exact step.

Solution 2:^[2]

That's because the jQuery plugin DateTimePicker's "disabledDates" only accepts and disables days. https://xdsoft.net/jqplugins/datetimepicker/

It looks like there is no such option for disabling specific times, you could work with only enabling specific times with https://xdsoft.net/jqplugins/datetimepicker/#allowTimes

jQuery('#datetimepicker').datetimepicker({
 datepicker:false,
 allowTimes:[
  '01:00', '02:00', '03:00', 
  '04:00', ... , '15:00', '60:00'
 ]
});

If you would like to continue with jQuery DateTimePicker you would have to write your own function for it e.g.

jQuery('#datetimepicker').datetimepicker({
    format:'d.m.Y H:i',
    timepicker: true,
    lang: 'en',
    onGenerate:function(ct,$i){
           //some function here to disable certain times
          });
      }
    }
});

or you could use Bootstrap Datepicker which has an option to do exactly what you want https://getdatepicker.com/4/Options/#endisabledhours

Solution 3:^[3]

try this Reference

$(function () {

    var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];
       $('#datetimepickerDemo').datetimepicker({
      disabledDates: disabledDate
     });
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	L Holden
Solution 2	swk23C8
Solution 3	Pawan Lakhara

'Disable specific times on a specific date using jQuery DateTimePicker

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]