DateTimePicker - позволяет выбрать по датам

Question

ограниченными

Я знаю, что звук Crasy, но мне нужно, чтобы выбрать даты отключить здесь: 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> 

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

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

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

Answer 1

Поскольку вы хотите выбрать те дни, их не следует отключать. Вместо этого вы можете динамически добавить класс css в td, который вы хотите покрасить в красный цвет, используя data attribute selector. Обратите внимание, что если вы изменили языковой стандарт 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>