Bootstrap DateTimePicker: не соблюдается disabledTimeIntervals?

Question

Я пытаюсь использовать Bootstrap DateTimePicker в качестве селектора времени / дня для календарной системы, которую я использую, но мне нужно отключить определенные диапазоны времени.

Согласно документации, есть опция 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);
        });
    });

Проблема в том, что это не работает, я могу выбрать диапазоны внутри этого по некоторым причинам, вот вывод консоли, данный мне из приведенного выше кода:

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

Из того, что я могу сказать, эти опции выглядят правильно для отключенных диапазонов, у кого-нибудь есть какие-либо идеи или предложения?

Спасибо!

Я создал пример JSFiddle , который вы можете увидеть, или, если хотите, запустите приведенный ниже фрагмент кода в stackoverflow.

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

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.23.0/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

<div id="content">
  <div class="container">
    <div class="row">
      <div class="col-lg-6">
        <div class="form-group">
          <label for="pickup_time">Pickup Time</label>
          <input class="form-control" id="pickup_time">
        </div>
      </div>
    </div>

  </div>
</div>