jQuery datetimepicker：禁用时间

Question

我在我的应用程序中使用 XDSoft jQuery datetimepicker（Ruby on Rails 4（仅供参考，不使用 bootstrap datetimepicker））。

我想知道是否有办法在特定日期禁用/停用特定时间，例如仅禁用 2014 年 12 月 17 日的 17:00？ disabledDates: ['...'] 禁用特定日期。

我尝试了disabledDateTimes 和disabledTimes，但它们不起作用。 谢谢。

Answer 1

以下是如何使用您所询问的 XDSoft DateTimePicker 完成此操作的一个示例。

我有一个 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 实现禁用。

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 中的时间范围。

首先我需要初始化范围，它将在当前日期被禁用：

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];

然后我需要函数来处理这个范围，检测交叉点并创建范围，这将被显示：

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

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>