Datetimepicker - allow choosing on disable dates

Question

I know that sound crasy but I need to allow choosing disable dates here: https://eonasdan.github.io/bootstrap-datetimepicker/

Why? I need to color dates with less possibility to booking, and color green dates where possibility to book is bigger so I write:

<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>

As you can see , I have enable dates in green color and other dates are disable and its in red color... but I need to allow visitors to choose also disable dates, not just enable...

I use enable and disable just to color dates on calendar...

So how to allow to choose disable dates also ?

Answer 1

Since you want to select those days you should not disable them. Instead you can dinamically add a css class to td you want to color red by using data attribute selector. Note that if you change datetimepicker locale you probably have to update selector format.

Here you can find a working example:

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>