JSFiddle - React, Tailwind, and code Playground

by sourcecodezone

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.42/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<div style=" margin: 100px;">
  <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>
</div>

JavaScript

$(function () {
     $('#datetimepicker').datetimepicker({ format : 'HH:mm:ss DD-MM-YYYY'});
 });
 
 $('#datetimepicker').on('dp.show', function(e){
  highlight()
})
$('#datetimepicker').on('dp.update', function(e){
 highlight()
})
$('#datetimepicker').on('dp.change', function(e){
    highlight()
})

function highlight(){

//generate date to highlight
var today = new Date();
var dateToHilight = [];
today.setDate(today.getDate() - 5); 

  for(var i=0;i<10;i++){
     var d = today.getDate();
     if(d<10)
	d = "0"+d;
     var m = today.getMonth()+1;
     if(m<10)
	m = "0"+m;
     var date = m+'/'+d+'/'+today.getFullYear();
     today.setDate(today.getDate() + 1); 
     dateToHilight.push(date);
  }
  
  
  //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";
     } 
  }
}