JQuery datetimepicker: disable time

Question

I use XDSoft jQuery datetimepickerin my application (Ruby on Rails 4 (for information only, not using bootstrap datetimepicker)),

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

I tried disabledDateTimesand disabledTimes, but they do not work. Thank.

Answer 1

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

specificDates, , .

hoursToTakeAway, specificDates, .

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

Fiddle

onGenerate, . , , , , , .

.

Fiddle 2

Answer 2

:

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

Answer 3

- , , jquery-ui-datepicker.

init, :

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 a function to continue these ranges, detect intersections, and create ranges to 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 the code in 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>