Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

306
Views
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.

about 4 years ago · Juan Pablo Isaza
3 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report

0

try this Reference

$(function () {

    var disabledDate = ['2020-07-14', '2020-07-15','2020-07-16'];
       $('#datetimepickerDemo').datetimepicker({
      disabledDates: disabledDate
     });
});
about 4 years ago · Juan Pablo Isaza Report

0

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.

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!