datetime picker base master

by Andrew Bone

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css">
<br/>
<div class="row">
  <div class="col-md-12">
    <div class="form-group">
    <div class="input-group date" id="txtCalendar"></div>
    </div>
  </div>
</div>

JavaScript

var weekStart = 4;

$('#txtCalendar').datetimepicker({
  viewMode: 'days',
  format: 'DD/MM/YYYY',
  inline: true,
  useCurrent: false,
});


$(".day").hover(function() {
  var index = $(this).index();
  if (index < weekStart) {
    prevSlice = index;
    nextSlice = weekStart - index - 1;
    prevWeek = 7;
    nextWeek = 0;
  } else {
    prevSlice = index - weekStart;
    nextSlice = 6 - index;
    prevWeek = weekStart;
    nextWeek = weekStart;
  }
  $(this).parent().next().children().slice(0, nextWeek).css('background-color', '#808080');
  $(this).parent().prev().children().slice(weekStart, prevWeek).css('background-color', '#808080');
  $(this).prevAll().slice(0, prevSlice).css('background-color', '#808080');
  $(this).css('background-color', '#808080');
  $(this).nextAll().slice(0, nextSlice).css('background-color', '#808080');
}, function() {
  $(this).parent().prev().children().slice(0, prevWeek).css('background-color', '');
  $(this).prevAll().slice(0, prevSlice).css('background-color', '');
  $(this).css('background-color', '');
  $(this).nextAll().slice(0, nextSlice).css('background-color', '');
  $(this).parent().next().children().slice(0, nextWeek).css('background-color', '');
});