jQuery datetimepicker：禁用时间

Posted 2023-05-07

【中文标题】jQuery datetimepicker：禁用时间

【英文标题】：jQuery datetimepicker: disable time

【发布时间】：2015-02-11 15:08:02

【问题描述】：

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

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

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

【问题讨论】：

你在使用 jquery ui datepicker 吗？或引导日期选择器，或其他一些日期选择器..？根据您期待答案的插件..？有问题的标签非常混乱，请删除不必要的标签。使用与您正在使用的插件相关的标签。如果不存在标签，请提供相关插件的链接。

既然你提到了datetimepicker 和disabledDates 选项，我猜你的意思是bootstrap datetimePicker

看起来有一个active issue 。

如上所述，我正在使用“jQuery datetimepicker”（我在括号中添加了 Ruby on Rails 4 只是为了提供信息，我没有使用引导程序 datetimepicker）。为了回应你的'因为你提到......禁用日期选项，我猜你的意思是引导 datetimepicker'，jQuery datetimepicker 具有相同的选项，请参阅链接 xdsoft.net/jqplugins/datetimepicker/ 。

【参考方案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

【讨论】：

谢谢。您的回复几乎完成了。我想淡化/禁用时间，而不是隐藏。你能做到吗？你能帮忙吗：我使用 allowTimes 选项来做你所做的，但你的解决方案是我想做的，但我不知道如何找出 datetimepicker 对象的结构。您如何知道使用hoursToTakeAway[ind].indexOf(parseInt($(this).text())) 访问特定时间？您只是猜测并尝试并出错了吗？我尝试了萤火虫，但是当我查看对象的数据时迷路了。非常感谢任何有关 jQuery 调试/编码的出色参考。

@user2725109 为了弄清楚如何隐藏/禁用时间，我所做的是检查 DOM（html 元素），然后我找到了时间 div 的类和父类。使用这些信息，我能够使用一些 jQuery 函数来解析时间 div，并使用一些自定义数组，我能够检查元素是否与数组中指定的时间匹配并操作这些元素......希望这是有道理的，我不得不对事件进行一些实验，以发现 onGenerate 事件最适合此目的。

@user2725109 如果我有时间，我可能还会研究一件事，那就是如果您单击同一日期，请获取它以便它不会重绘日历（您会看到元素在被禁用之前再次启用一段时间）。我有一个想法，希望能奏效，但如果不成功，我就很难解决。

您能告诉我您是如何检查 DOM 并找到类 (.xdsoft_time_variant .xdsoft_time) 的吗？哪个插件？我正在使用 Firefox DOM Inspector，但看不到这些类。

有谁知道，在生成日期选择器后禁用日期。使用 javascript 还是 jQuery？基于触发的一些事件。

【参考方案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();        
              
          );
      
    
);

【参考方案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>