logo标签列表

jQuery日期时间选择器: 禁用时间

jquery-uidatepickerjquery-ui-datepickerdatetimepicker
7
我正在使用XDSoft的jQuery datetimepicker插件，在我的应用程序中（Ruby on Rails 4，仅供参考，不使用bootstrap datetimepicker）。
我想知道是否有一种方法可以在特定日期禁用/停用特定时间，例如只在2014年12月17日禁用下午5点？ disabledDates: ['...'] 可以禁用特定日期。
我尝试了disabledDateTimes和disabledTimes但它们不起作用。 谢谢。
2
你正在使用jQuery UI日期选择器吗？还是Bootstrap日期选择器，或其他日期选择器？根据你使用的插件，才能给出答案。问题中的标签非常混乱，请删除不必要的标签。使用与你使用的插件相关的标签。如果没有标签，请提供有关插件的链接。 - T J
由于您提到了datetimepicker和disabledDates选项，我猜您指的是Bootstrap datetimePicker。 - red-X
看起来这个问题还有活跃的问题。 - red-X
如上所述，我正在使用“jQuery datetimepicker”（我在括号中添加了Ruby on Rails 4仅供参考，我没有使用bootstrap datetimepicker）。针对您的“既然您提到...禁用日期选项，我猜您是指bootstrap datetimepicker”，jQuery datetimepicker也具有相同的选项，请参阅链接xdsoft.net/jqplugins/datetimepicker/。 - user2725109
3个回答
11

以下是使用您所询问的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 2

谢谢。你的回答几乎完成了。我想要淡化/禁用时间，而不是隐藏。你能做到吗？你能帮忙吗？我使用allowTimes选项来做你所做的事情，但你的解决方案是我想要做的，但我不知道如何找到datetimepicker对象的结构。你是怎么知道要使用hoursToTakeAway[ind].indexOf(parseInt($(this).text()))来访问特定时间的？你只是猜测并尝试错误吗？我尝试了firebug，但当我查看对象的数据时，我迷失了。有关jQuery调试/编码的任何优秀参考资料都将不胜感激。 - user2725109
1
@user2725109 为了找出如何隐藏/禁用时间，我检查了DOM（HTML元素），找到了时间div的类和父类的类。使用这些信息，我能够使用一些jQuery函数来解析时间div，并使用一些自定义数组来检查元素是否与数组中指定的时间匹配并操作这些元素...希望这有意义，我必须进行一些事件实验才能找到onGenerate事件最适合此目的。 - Trevor
1
@user2725109 如果我有时间，也许还有一件事情我可以研究一下，那就是如果你点击同一日期，让它不要重新绘制日历（你会看到元素在被禁用之前再次启用）。我有一个想法，希望能够成功，但如果不成功，那么对我来说将会很困难。 - Trevor
请问您是如何检查 DOM 并找到类名为 (.xdsoft_time_variant .xdsoft_time) 的元素的呢？使用了哪个插件？我正在使用 Firefox 的 DOM 检查器，但无法看到这些类。 - user2725109
有人知道如何在日期选择器生成后禁用日期吗？使用JavaScript或jQuery？基于某些触发事件。 - Rahul Sagore
1
这段代码对我来说有效：

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();        
              }
          });
      }
    }
});
1
如果有人仍然需要解决方案，我编写了代码来禁用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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接