datetimepicker icon indicating copy to clipboard operation
datetimepicker copied to clipboard

Disable specific times in a specific day

Open aM0N12 opened this issue 3 years ago • 2 comments

Hello,

I want to disable specific times in a specific day (not the entire day), how can i achieve it ?

Best regards

aM0N12 avatar Mar 15 '22 09:03 aM0N12

I desperately want this too, but I can't find any way 🙁 I can only disable entire days, which I don't want to do.

lukejames1111 avatar Apr 26 '22 11:04 lukejames1111

Ok, I've actually figured it out myself 😄

First we get the dates and times in a multidimensional array and JSON encode the array (I'm using PHP, but the logic is still the same no matter what language you use).

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

And then in our function we loop through the array and do a simple if statement which says if the date is in the array then to apply a class to that which disables the date 😄

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

You just have to note that the date format must be the same within the function to whatever it is you have stored in your array. Also, my step is set to 15, which only disables that exact time. You'd need to change this to whatever format you use.

lukejames1111 avatar Apr 27 '22 11:04 lukejames1111