jQuery datetimepicker: disable time

Question

I am using the XDSoft jQuery datetimepicker in my app (Ruby on Rails 4 (just for information, not using bootstrap datetimepicker)).

I was wondering if there is a way to disable/deactivate a specific time at a specific date, for example disable only 17:00 on 12/17/2014? disabledDates: ['...'] disables a specific date.

I tried disabledDateTimes and disabledTimes but they don't work. Thanks.

Solution 1

Here is one example of how this can be done using the XDSoft DateTimePicker you are asking about.

I have a specificDates array which you can use to add dates you want to target.

I also have an hoursToTakeAway multi dimensional array which corresponds with the specificDates array where you can specify the hours to take away.

HTML

<input class="eventStartDate newEventStart eventEditDate startTime eventEditMetaEntry" id="from_date" name="from_date" placeholder="Start date and time" readonly="readonly" type="text" />

Javascript

var specificDates = ['24/12/2014','17/12/2014'];

var hoursToTakeAway = [[14,15],[17]];

$('#from_date').datetimepicker({
    format:'d.m.Y H:i',
    timepicker: true,
    lang: 'en',
    onGenerate:function(ct,$i){
      var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
      $('.xdsoft_time_variant .xdsoft_time').show();
      if(ind !== -1) {
          $('.xdsoft_time_variant .xdsoft_time').each(function(index){
              if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1)              {
                  $(this).hide();        
              }
          });
      }
    }
});

Example Fiddle

Basically I am taking advantage of the onGenerate event which happens after each calendar has been rendered. Then I am checking to see if the date matches the specified day and if it does, we iterate through all the time elements and hide the ones specified for the specific date.

Updated Fiddle implementing disable.

Fiddle 2

Solution 2

This code is working for me:

var specificDates = ['24/12/2014','17/12/2014'];

var hoursToTakeAway = [[14,15],[17]];

$('#from_date').datetimepicker({
    format:'d.m.Y H:i',
    timepicker: true,
    lang: 'en',
    onGenerate:function(ct,$i){
      var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
      $('.xdsoft_time_variant .xdsoft_time').show();
      if(ind !== -1) {
          $('.xdsoft_time_variant .xdsoft_time').each(function(index){
              if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1)              {
                  $(this).hide();        
              }
          });
      }
    }
});

Solution 3

If someone still need solution, i write code to disable ranges of time in jquery-ui-datepicker.

First I need to init ranges, that will be disabled at current date:

dateObj1 = new Date(2016,6,22,0);
dateObj2 = new Date(2016,6,27,10);

diap1 = [dateObj1, dateObj2];

dateObj1 = new Date(2016,6,27,13);
dateObj2 = new Date(2016,6,27,14);

diap2 = [dateObj1, dateObj2];

dateObj1 = new Date(2016,6,27,20);
dateObj2 = new Date(2016,6,29,10);

diap3 = [dateObj1, dateObj2];

dateObj1 = new Date(2016,6,27,0);
dateObj2 = new Date(2016,6,27,13);

diap4 = [dateObj1, dateObj2];

dateObj1 = new Date(2016,7,02,4);
dateObj2 = new Date(2016,7,02,4,59);

diap5 = [dateObj1, dateObj2];

diapazons = [diap1,diap2,diap3,diap4,diap5];

Then I need function, to proceed this ranges, detect intersections and create ranges, that will be displayed:

    function getAvailableTimes(restricts, curr_year, curr_month, cur_day)
{
    day_diaps = [[new Date(curr_year,curr_month,cur_day,0), new Date(curr_year,curr_month,cur_day,23,59,59)]];

    restricts.forEach(function(item, i, arr) {

        day_diaps.forEach(function(day_diap, i_d, arr_d) {
            //console.log('day = '+day_diap.toString());

            if (day_diap[0] >= item[1])
            {
                //console.log(i+' раньше');
            }

            else if (day_diap[1] <= item[0])
            {
                //console.log(i+' позже');
            }

            else if (day_diap[0] >= item[0] && day_diap[1] <= item[1])
            {
                //console.log(i+' закрыт полностью');
                arr_d.splice(i_d,1);
            }

            else if (day_diap[0] >= item[0] && day_diap[1] >= item[1])
            {
                day_diap[0] = item[1];
                //console.log(i+' ранее перекрытие, начало смещено на '+ day_diap.toString());
            }

            else if (day_diap[0] <= item[0] && day_diap[1] <= item[1])
            {
                day_diap[1] = item[0];
                //console.log(i+' позднее перекрытие, конец смещен на '+ day_diap.toString());
            }

            else if (day_diap[0] <= item[0] && day_diap[1] >= item[1])
            {
                new_diap = [item[1],day_diap[1]];
                arr_d.push(new_diap);
                day_diap[1] = item[0];
                //console.log(i+' restrict полностью умещается в диапазон '+ day_diap.toString());
                //console.log(i+' добавлен диапазон '+ new_diap.toString());
            }
        });
    });

    return day_diaps;
}

And code in of datetimepicker:

<input type="text" id="default_datetimepicker"/>


<script>

    $.datetimepicker.setLocale('ru');

    var dates_to_disable = ['30-07-2016','31-07-2016','04-08-2016'];

    $('#default_datetimepicker').datetimepicker({
        formatTime:'H:i',
        lang: "ru",
        defaultTime:"10:00",
        formatDate:'d-m-Y',
        todayButton: "true",
        minDate:'01-01--1970', // yesterday is minimum date
        disabledDates:dates_to_disable,

        onGenerate:function(ct,i){

            var dates = jQuery(this).find('.xdsoft_date ');
            $.each(dates, function(index, value){
                year = jQuery(value).attr('data-year');
                month = jQuery(value).attr('data-month');
                date = jQuery(value).attr('data-date');

                diaps = getAvailableTimes(diapazons,year,month,date);
                net_nihrena = true;

                diaps.forEach(function(day_diap, i_d, arr_d) {
                    net_nihrena = false;
                });

                if (net_nihrena)
                {
                    jQuery(value).addClass('xdsoft_disabled');
                    //jQuery(value).addClass('xdsoft_restricted');
                }
            });

            cur_date = ct;

            diaps = getAvailableTimes(diapazons,ct.getFullYear(),ct.getMonth(),ct.getDate());

            var times = jQuery(this).find('.xdsoft_time ');
            $.each(times, function(index){

                var hour = $(this).attr('data-hour');
                var minute = $(this).attr('data-minute');

                cur_date.setHours(hour,minute,0);


                 net_takogo_vremeni = true;

                diaps.forEach(function(day_diap, i_d, arr_d) {

                 if ((day_diap[0] < cur_date && day_diap[1] > cur_date)  || hour==0)
                 {
                     net_takogo_vremeni = false;
                 }
                 });

                if (net_takogo_vremeni)
                {
                    $(this).addClass('xdsoft_disabled');
                    //$(this).addClass('xdsoft_restricted');
                }
            });
        },

        onSelectDate : function(ct) {
        }
    });
</script>

Comments

[T J]

Are you using jquery ui datepicker ..? or bootstrap datepicker, or some other date picker..? Based on which plugin you're expecting an answer..? The tags in question are very confusing, please remove the unnecessary tags. use the tag related to the plugin you're using. If no tag exists, provide a link to the plugin in question instead.

[user2725109]

Thanks. Your response is almost complete. I'd like to fade/disable the time, not hide. Can you do that? Can you help on this: I used allowTimes option to do exactly what you did, but your solution was the one that I wanted to do, but I didn't know how to find out about the structure of datetimepicker object. How you knew to use hoursToTakeAway[ind].indexOf(parseInt($(this).text())) to access a specific time? Did you just guess and did try and error? I tried firebug but I got lost when I looked at the object's data. Any great references on jQuery debugging/coding would be really appreciated.

[Trevor]

@user2725109 What I did in order to figure out how to hide/disable the times was to inspect the DOM (html elements) and I found which class the time div's had and the class of the parent. Using this information I was able to use some jQuery functions to parse through the time div's and using some customized arrays I am able to check to see if the elements match the time specified in the array and manipulate those elements... Hopefully that makes sense, I had to do some experimentation with the Events to find that the onGenerate event worked best for this purpose.

[Trevor]

@user2725109 There is perhaps one more thing I may look into if I have time and that is that if you click on the same date, get it so that it does not redraw the calendar ( you will see that the elements get enabled again for a moment before being disabled ). I have one idea that would hopefully work, but if that's not successful then it would be difficult for me to tackle.

[user2725109]

Can you please tell me how you inspected the DOM and found the classes (.xdsoft_time_variant .xdsoft_time)? Which plugin? I'm using Firefox DOM Inspector but can't see those classes.

[Rahul Sagore]

Does anyone know, to disable dates after datepicker has been generated. Using javascript or jQuery? Based on some events fired.