Bootstrap DateTimePicker：是否不遵守disabledTimeIntervals？

Question

我正在尝试将Bootstrap DateTimePicker用作我正在使用的日历系统的时间/日期选择器，但是我需要禁用特定的时间范围。

根据文档，有一个setProductCard(product: ProductModel) { const prod = this.productCart.find((p) => p.name === product.name) if (prod) { prod.price += product.price; prod.numberOfProduct += 1; } else { this.productCart.push(product); } this.shopCartChanged.next(this.productCart); } 选项似乎是我想要的，但是，相反。

因此，我有一个配置说，例如，在星期三，我希望可以选择以下时间范围：

disabledTimeIntervals

我写了一个函数来计算它周围的所有时间范围，这似乎是可行的，但是我发现如果我尝试动态更新此选项，选择器将关闭并重新打开，因此我决定尝试并仅在单击一天时为此设置配置，我已经这样做了：

6:30 AM - 4:30 PM
5:30 PM - 9:00 PM
9:30 PM - 11:00 PM

问题是，这似乎不起作用，出于某种原因，我能够在其中选择范围，这是上面代码给我的控制台输出：

$(expiration_datepicker).on('dp.show', function(){
        $("td.day[data-action='selectDay']").on('click', function(){
            console.log("Refreshing config, updating disabled times for " + $(this).data('day'));
            var config = get_calendar_config();
            var disabled_intervals =  calculate_disabled_times(moment($(this).data('day')));
            console.log("Disabled Ranges: ");
            disabled_intervals.forEach(function(e){ console.log(e[0].format('L LT'), ' to ' ,  e[1].format('L LT')); });
            config.disabledTimeIntervals = disabled_intervals;
            console.log(config);
            $(expiration_datepicker).data('DateTimePicker').options(config);
        });
    });

据我所知，这些选项看起来适合禁用范围，是否有人有任何想法或建议？

谢谢！

我已经创建了一个JSFiddle example，您可以看到它，或者根据需要在stackoverflow中运行以下代码段。

Refreshing config, updating disabled times for 01/09/2019
Disabled Ranges: 
01/09/2019 12:00 AM  to  01/09/2019 6:30 AM
01/09/2019 4:30 PM  to  01/09/2019 5:30 PM
01/09/2019 9:00 PM  to  01/09/2019 9:30 PM
01/09/2019 11:00 PM  to  01/09/2019 11:59 PM

(function($) {

  var store_config = {
    "open_days": [
      false,
      false,
      false,
      false,
      false,
      false,
      false
    ],
    "open_hours": [
      [],
      [],
      [],
      [
        "06:30-16:30",
        "17:30-21:00",
        "21:30-23:00"
      ],
      [],
      [],
      []
    ],
    "lead_time": "15",
    "stepping": "20",
  };

  function get_calendar_config() {
    return {
      minDate: moment().add(store_config.lead_time, 'minutes'),
      maxDate: moment().add('7', 'days'),
      daysOfWeekDisabled: store_config.open_days.reduce(function(new_array, value, index) {
        if (value === 'off')
          new_array.push(index);
        return new_array;
      }, []),
      stepping: store_config.stepping,
      showClose: true,
      debug: true,
    }
  }

  function calculate_disabled_times(day) {
    var day = moment(day);
    //hardcoded for this example, goal is the following ranges being enabled:
    // 6:30 AM - 4:30 PM
    // 5:30 PM - 9:00 PM
    // 9:30 PM - 11:00 PM
    return [
      [
        day.clone().set({
          hour: 0,
          minute: 0
        }),
        day.clone().set({
          hour: 6,
          minute: 30
        })
      ],
      [
        day.clone().set({
          hour: 16,
          minute: 30
        }),
        day.clone().set({
          hour: 17,
          minute: 30
        })
      ],
      [
        day.clone().set({
          hour: 21,
          minute: 0
        }),
        day.clone().set({
          hour: 21,
          minute: 30
        })
      ],
      [
        day.clone().set({
          hour: 23,
          minute: 0
        }),
        day.clone().set({
          hour: 23,
          minute: 59
        })
      ]
    ]
  }

  var delivery_datepicker = $("input#pickup_time");
  delivery_datepicker.datetimepicker(get_calendar_config());
  delivery_datepicker.on('dp.show', function() {
    $("td.day[data-action='selectDay']").on('click', function() {
      console.log("Refreshing config, updating disabled times for " + $(this).data('day'));
      var config = get_calendar_config();
      var disabled_intervals = calculate_disabled_times(moment($(this).data('day')));
      console.log("Disabled Ranges: ");
      disabled_intervals.forEach(function(e) {
        console.log(e[0].format('L LT'), ' to ', e[1].format('L LT'));
      });
      config.disabledTimeIntervals = disabled_intervals;
      console.log(config);
      $(delivery_datepicker).data('DateTimePicker').options(config);
    });
  });

})(jQuery);

#content {
  margin: 20px;
}