JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://xdsoft.net/scripts/jquery.datetimepicker.js"></script>
<link rel="stylesheet" href="http://xdsoft.net/scripts/jquery.datetimepicker.css">
<input class="eventStartDate newEventStart eventEditDate startTime eventEditMetaEntry" id="from_date" name="from_date" placeholder="Start date and time" readonly="readonly" type="text" />

CSS

.xdsoft_timepicker .xdsoft_time_box .xdsoft_time.disabled:hover {
    color: #666666!important;
    background: #F5F5F5!important;
}

JavaScript

var specificDates = ['24/12/2014','17/12/2014'];

var hoursToTakeAway = [[14,15],[17]];
var lastDate;
$('#from_date').datetimepicker({
    format:'d.m.Y H:i',
    timepicker: true,
    lang: 'en',
    onGenerate:function(ct,$i){
      $('.xdsoft_time_variant .xdsoft_time').prop('disabled',false).fadeTo("fast",1).removeClass('disabled');
      //$('.xdsoft_time_variant .xdsoft_time').prop('disabled',false);
      var ind = specificDates.indexOf(ct.dateFormat('d/m/Y'));
      if(ind !== -1) {
          $('.xdsoft_time_variant .xdsoft_time').each(function(index){
              if(hoursToTakeAway[ind].indexOf(parseInt($(this).text())) !== -1){
                  $(this).addClass('disabled');
                  $(this).fadeTo("fast",.3);
                  $(this).prop('disabled',true);
              }
          });
      }
    }
});