How to highlight specific dates in bootstrap datepicker?

Question

I am using bootstrap datepicker.I need to highlight some random dates.

For Example:

I need to highlight the dates like 1,3,8,20,21,16,26,30. Could you please tell me how to highlight those random dates in bootstrap datepicker?

Answer 1

As suggested by amphetamachine Highlight certain dates on bootstrap-datepicker provides most of what is required to solve this. The answer to that question can be adapted to the following

$('.inline_date').datepicker({
    multidate: true,
    todayHighlight: true,
    minDate: 0,
    beforeShowDay: function(date) {
       var hilightedDays = [1,3,8,20,21,16,26,30];
       if (~hilightedDays.indexOf(date.getDate())) {
          return {classes: 'highlight', tooltip: 'Title'};
       }
    }
});

The above will apply the highlight style class to the listed days in every month, with further checks you could limit it to specific months. Some old browsers may not support indexOf, in which case you can either use a JS library or expand the if.

Answer 2

this is how i am highlighting all days except the days in "user_busy_days" array.

Bootstrap date-picker has beforeShowDay prop, which gets executed for each day of month [42 times max], so i just check if the day which is being rendered is in my array , and if it is present in array i highlight it with a gray color else i just highlight it with green color .

I hope it will do the trick.

        var today               = new Date();
        var today_formatted     = today.getFullYear()+'-'+(today.getMonth()+1)+'-'+('0'+today.getDate()).slice(-2);
        var user_busy_days      = ['2017-12-09','2017-12-16','2017-12-19'];



        $('#datetimepicker12').datepicker({
            inline: true,
            sideBySide: true,
            beforeShowDay: function (date) {

                calender_date = date.getFullYear()+'-'+(date.getMonth()+1)+'-'+('0'+date.getDate()).slice(-2);

                var search_index = $.inArray(calender_date, user_busy_days);

                if (search_index > -1) {
                    return {classes: 'non-highlighted-cal-dates', tooltip: 'User available on this day.'};
                }else{
                    return {classes: 'highlighted-cal-dates', tooltip: 'User not available on this day.'};
                }

            }
        });