How to highlight specific dates in bootstrap datep

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

I found a solution.

     $('.inline_date').datepicker({
        multidate: true,
        todayHighlight: true,
        minDate: 0,
    });

 $('.inline_date').datepicker('setDates', [new Date(2015, 7, 5), new Date(2015, 7, 8), new Date(2015, 7, 7)])

Only one problem there the highlights are removed on click. and it take month as one less. if you want August dates then you have to use 7 not 8.

Answer 2

Based on @Hassan Raza answer's I've made this jsfiddle: https://jsfiddle.net/ToniBCN/mzke8tuv/

Set calendar to february 2019 to see some days in orange, others in green and the rest disabled, depending json data.

// In order to call bootstrap's datepicker instead of jquery object
// https://github.com/uxsolutions/bootstrap-datepicker
var datepicker = $.fn.datepicker.noConflict(); // return $.fn.datepicker to previously assigned value
$.fn.bootstrapDP = datepicker; // give $().bootstrapDP the bootstrap-datepicker functionality

$.fn.bootstrapDP.defaults.format = "dd/mm/yyyy";
$.fn.bootstrapDP.defaults.startDate = '01/01/2019'

$.fn.bootstrapDP.defaults.beforeShowDay = function(date) {

  // in order to get current day from calendar in the same format than json
  calendar_dates = date.getFullYear() + ('0' + (date.getMonth() + 1)).slice(-2) + ('0' + date.getDate()).slice(-2);

  let optionByDate = [{
      "date": "20190126",
      "option": "A"
    },
    {
      "date": "20190128",
      "option": "B"
    }, {
      "date": "20190131",
      "option": "A"
    }, {
      "date": "20190202",
      "option": "B"
    }, {
      "date": "20190205",
      "option": "A"
    }, {
      "date": "20190207",
      "option": "B"
    }, {
      "date": "20190210",
      "option": "A"
    }, {
      "date": "20190212",
      "option": "B"
    }, {
      "date": "20190215",
      "option": "A"
    }, {
      "date": "20190217",
      "option": "B"
    }, {
      "date": "20190220",
      "option": "A"
    }, {
      "date": "20190222",
      "option": "B"
    }, {
      "date": "20190225",
      "option": "A"
    }, {
      "date": "20190227",
      "option": "B"
    }, {
      "date": "20190302",
      "option": "A"
    }, {
      "date": "20190304",
      "option": "B"
    }
  ];

  // Get data from optionByDate json
  function getDataByCalendar(date) {
    return optionByDate.filter(
      function(optionByDate) {
        return optionByDate.date == date
      }
    );
  }

  let search_index = getDataByCalendar(calendar_dates);

  if (search_index.length > 0) {
    if (search_index[0].option == "A") return {
      classes: 'highlighted-a',
      tooltip: 'A option'
    };
    if (search_index[0].option == "B") return {
      classes: 'highlighted-b',
      tooltip: 'B option'
    };

  } else {
    // Disabled day
    return {
      enabled: false,
      tooltip: 'No option'
    };
  }

};

Answer 3

The Blog post here explaining how it can achieve using Bootstrap Datetimepicker.

Basically using the events show, update and change the date need to be highlighted.

$('#datetimepicker').on('dp.show', function(e){
  highlight()
})
$('#datetimepicker').on('dp.update', function(e){
 highlight()
})
$('#datetimepicker').on('dp.change', function(e){
    highlight()
})

function highlight(){
 var dateToHilight = ["04/19/2019","04/20/2019","04/30/2019"];
 var array = $("#datetimepicker").find(".day").toArray();
 for(var i=0;i -1) {
       array[i].style.color="#090";
       array[i].style.fontWeight = "bold";
    } 
 }
 }

For more information see the blog

Reference:

https://scode7.blogspot.com/2019/04/here-is-code-function-hilight-var.html

Answer 4

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 5

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.'};
                }

            }
        });