xdan / datetimepicker

jQuery Plugin Date and Time Picker
https://xdsoft.net/jqplugins/datetimepicker/
MIT License
3.5k stars 1.52k forks source link

Disable specific times in a specific day #789

Open aM0N12 opened 2 years ago

aM0N12 commented 2 years ago

Hello,

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

Best regards

lukejames1111 commented 2 years ago

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 commented 2 years ago

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.