How to highlight specific dates in bootstrap datepicker?

Question

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

Example:

I need to highlight dates, for example, 1,3,8,20,21,16,26,30. Could you tell me how to highlight these random dates in bootstrap datepicker?

Answer 1

As suggested by amphetamachine Highlighting specific dates on bootstrap-datepicker provides most of what is needed to solve this problem. The answer to this 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 example will apply the highlight style class to the specified days in each month, with further checks you can limit it to certain months. Some older browsers may not support indexOf, in which case you can use the JS library or deploy if.

Answer 2

so I select all days except days in the user_busy_days array.

Bootstrap date-picker has beforeShowDay prop, which is executed for each day of the month [42 times max.], So I just check if the day that is displayed in my array and if it is present in the array I highlight it is grayed out, otherwise I just highlighted it in green.

I hope this works.

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

Answer 3

I have 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 stands out when clicked. and it takes a month as one less. if you need august dates you should use 7 not 8.

Answer 4

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

Set the calendar for February 2019 so that some days are orange, others are green, and the rest are disabled, depending on json data.

 // In order to call bootstrap 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 5

The blog post here explains how to achieve this using Bootstrap Datetimepicker.

Mostly through the events of the show , updates and date changes should 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.

Link:

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