Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

308
Vistas
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 Respuestas
Responde la pregunta

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 Denunciar

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 Denunciar

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 Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda