How to highlight specific dates in bootstrap datepicker?

Deepa Mani picture Deepa Mani · Feb 28, 2015 · Viewed 25.1k times · Source

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

user3702362 picture user3702362 · Aug 20, 2015

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.