Bootstrap DateTimepicker Highlight Multiple Date

Bootstrap  Datetimepicker doesn't have the option for highlighting multiple date till the version 4.17.42, and below is one way to achieve it.


So as first step add latest js and css file

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></link>

The HTML element to pick the datetime

<div class="input-group date" id="datetimepicker">
<input class="form-control" id="datetimepicker" placeholder="To date" type="text" />
<span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker').datetimepicker({ format : 'HH:mm:ss DD-MM-YYYY'});
     });
</script>

Now do highlight  call on events like show update and change
See the post Bootstrap Datetimepicker Event Example

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

And the highlight function

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

Demo