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>