Jquery ui jQuery datetimepicker:禁用时间

我在我的应用程序中使用XDSoft（RubyonRails4（仅供参考，而不是使用

引导datetimepicker

）

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

禁用日期：['…']

禁用特定日期

我尝试了

disabledDateTimes

和

disabledTimes

，但都不起作用。

---

谢谢。

下面是一个示例，说明如何使用您所询问的XDSoft DateTimePicker来完成此操作

我有一个

specificDates

数组，你可以用它来添加你想要的目标日期

我还有一个

hoursToTakeAway

多维数组，它与

specificDates

数组相对应，您可以在其中指定要带走的小时数

HTML

范例

基本上，我是在利用每个日历渲染后发生的

onGenerate

事件。然后我检查日期是否与指定的日期匹配，如果匹配，我们迭代所有时间元素并隐藏为特定日期指定的时间元素

更新了Fiddle实现禁用

---

此代码适用于我：

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

---

若有人仍然需要解决方案，我会在jQueryUIDatePicker中编写代码来禁用时间范围

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

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

函数getAvailableTimes（限制、当前年份、当前月份、当前日期）
{
day_dips=[[新日期（当前年份、当前月份、当前日期，0），新日期（当前年份、当前月份、当前日期，23,59,59）]；
限制.forEach（功能（项目，i，arr）{
day_dips.forEach（函数（day_dips，i_d，arr_d）{
//console.log（'day='+day_diap.toString（））；
如果（第[0]>=第[1]项）
{
//console.log（i+'Пааааа′）；
}
否则，如果（第[1]天=第[0]项和第[1]天=第[0]项和第[1]天=第[1]项）
{
第[0]天=第[1]项；
//控制台日志（i+‘ааааааааааааааааааааа；
}
否则，如果（第天）您使用的是jquery ui datepicker..还是bootstrap datepicker，或其他日期选择器..？基于您希望得到答案的插件..？有问题的标记非常混乱，请删除不必要的标记。请使用与您使用的插件相关的标记。如果没有标记，请提供指向有问题插件的链接。因为您e提到一个
日期时间选择器
和
禁用日期选择器
选项，我猜你的意思是似乎有一个用于此的选项。如上所述，我使用的是“jQuery日期时间选择器”（我在paranthesis中添加Ruby on Rails 4只是为了提供信息，我没有使用引导日期时间选择器）。若要响应您的“因为您提到了…禁用日期选项，我猜您是指引导datetimepicker”，jQuery datetimepicker也有相同的选项，请参阅链接xdsoft.net/jqplugins/datetimepicker/。谢谢。您的响应几乎完成了。我希望淡入/禁用时间，而不是隐藏。您可以这样做吗？您能在这方面提供帮助吗：我使用allowTimes选项可以完全执行您所做的操作，但您的解决方案正是我想要执行的，但我不知道如何找到datetimepicker对象的结构。您知道如何使用
hoursToTakeAway[ind].indexOf（parseInt（$（this）.text（））
访问特定时间？您只是猜测了一下，并尝试了一下，然后出错了吗？我尝试了firebug，但在查看对象的数据时迷路了。如果有任何关于jQuery调试/编码的优秀参考资料，我将不胜感激。@user2725109为了找出如何隐藏/禁用时间，我所做的是检查DOM（html元素）我找到了time div的类和父类。利用这些信息，我能够使用一些jQuery函数解析time div，并使用一些自定义数组，我能够检查元素是否与数组中指定的时间匹配，并操纵这些元素……希望这是有意义的，我已经要对事件进行一些实验，以发现onGenerate事件最适合于此目的。@user2725109如果我有时间，我可能还要研究一件事，那就是如果您单击同一日期，请获取它，以便它不会重新绘制日历（您将看到元素在被禁用之前会再次启用一段时间）。我有一个想法，希望能奏效，但如果不成功，我将很难解决。您能告诉我您是如何检查DOM并找到类（.xdsoft\u time\u variant.xdsoft\u time）的吗？哪个插件？我正在使用Firefox DOM Inspector，但看不到这些类。有人知道吗，在生成日期选择器之后禁用日期。使用javascript或jQuery？基于一些触发的事件。
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;
}

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