jQuery datetimepicker：禁用时间 [英] jQuery datetimepicker: disable time

问题描述

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

I am using the XDSoft jQuery datetimepicker in my app (Ruby on Rails 4 (just for information, not using bootstrap datetimepicker)).

我想知道是否有方法可以在特定日期禁用/停用特定时间，例如在12/17/2014禁用17:00？
disabledDates：['...'] 禁用特定日期。

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

我尝试过 disabledDateTimes 和 disabledTimes 工作
谢谢。

I tried disabledDateTimes and disabledTimes but they don't work. Thanks.

推荐答案

下面是使用您要询问的XDSoft DateTimePicker如何完成此示例。

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

我有一个 specificDates 数组，您可以使用它们来添加要定位的日期。

I have a specificDates array which you can use to add dates you want to target.

我还有一个 hoursToTakeAway 多维数组，它与 specificDates 数组相对应您可以在此指定要带走的时间。

I also have an hoursToTakeAway multi dimensional array which corresponds with the specificDates array where you can specify the hours to take away.

HTML

<input class="eventStartDate newEventStart eventEditDate startTime eventEditMetaEntry" id="from_date" name="from_date" placeholder="Start date and time" readonly="readonly" type="text" />

Javascript

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

示例
小提琴

基本上我正在利用发生的 onGenerate 事件每个日历已经呈现之后。然后我检查日期是否与指定的日期相匹配，如果是的话，我们会遍历所有时间元素，并隐藏指定日期的指定日期。

Basically I am taking advantage of the onGenerate event which happens after each calendar has been rendered. Then I am checking to see if the date matches the specified day and if it does, we iterate through all the time elements and hide the ones specified for the specific date.

更新小提琴实现禁用。

小提琴2

这篇关于jQuery datetimepicker：禁用时间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！