Datetimepicker - позволяет выбрать отключить даты

Я знаю, что звук вылетает, но мне нужно разрешить выбор даты отключения здесь:https://eonasdan.github.io/bootstrap-datetimepicker/

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

<script>
    $(function () {
        $('#start').datetimepicker({
            format: 'YYYY/MM/DD',
            enabledDates: [
                moment("05/21/2016"),
                moment("05/22/2016"),
                moment("05/23/2016"),
                moment("05/24/2016"),

            ],
        });
    });
</script>
<style type="text/css">
    .bootstrap-datetimepicker-widget table th.disabled,
    .bootstrap-datetimepicker-widget table th.disabled:hover {
        background: #FF9088 !!important;
        border-radius: 0px !important;
        color: #fff !important;
        border: 1px solid #fff !important;

    }
    .bootstrap-datetimepicker-widget table td.disabled,
    .bootstrap-datetimepicker-widget table td.disabled:hover {
        background: #FF9088 !important;
        border-radius:  0px !important;
        border: 1px solid #fff !important;

        color: #fff !important;
    }
    .bootstrap-datetimepicker-widget table td span.disabled,
    .bootstrap-datetimepicker-widget table td span.disabled:hover {
        background: #FF9088 !important;
        border-radius: 0px !important;
        border: 1px solid #fff !important;

        color: #fff !important;
    }
    .day {
        background: rgba(88, 204, 0, 0.52) !important;
        border-radius: 0px !important;
        border: 1px solid #fff !important;
    }
</style>

Как вы можете видеть, у меня есть даты включения зеленым цветом, а другие даты отключены, а красным цветом ... но мне нужно разрешить посетителям выбирать также отключать даты, а не просто включать ...

Я использую включить и отключить, чтобы просто раскрасить даты в календаре ...

Так как же разрешить выбирать даты отключения?

Ответы на вопрос(1)

вы не должны их отключать. Вместо этого вы можете динамически добавить класс CSS вtd Вы хотите покрасить красным с помощьюселектор атрибута данных, Обратите внимание, что если вы измените локаль datetimepicker, вам, вероятно, придется обновить формат селектора.

Здесь вы можете найти рабочий пример:

function addRedClass() {
    var redDates = ["05/21/2016","05/22/2016","05/23/2016","05/24/2016"];
    for(var i=0; i<redDates.length; i++){
        $('[data-day="'+redDates[i]+'"]').addClass('redDate');
    }
}

$('#start').datetimepicker({
    format: 'YYYY/MM/DD'
}).on('dp.show dp.update', addRedClass);
.bootstrap-datetimepicker-widget table th.redDate,
.bootstrap-datetimepicker-widget table th.redDate:hover {
    background: #FF9088 !!important;
    border-radius: 0px !important;
    color: #fff !important;
    border: 1px solid #fff !important;

}
.bootstrap-datetimepicker-widget table td.redDate,
.bootstrap-datetimepicker-widget table td.redDate:hover {
    background: #FF9088 !important;
    border-radius:  0px !important;
    border: 1px solid #fff !important;

    color: #fff !important;
}
.bootstrap-datetimepicker-widget table td span.redDate,
.bootstrap-datetimepicker-widget table td span.redDate:hover {
    background: #FF9088 !important;
    border-radius: 0px !important;
    border: 1px solid #fff !important;

    color: #fff !important;
}
.day {
    background: rgba(88, 204, 0, 0.52) !important;
    border-radius: 0px !important;
    border: 1px solid #fff !important;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.css" rel="stylesheet"/>
<link href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css" rel="stylesheet"/>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

<div class='input-group date' id='start'>
  <input type='text' class="form-control" />
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
</div>

Ваш ответ на вопрос