JSFiddle - React, Tailwind, and code Playground

by Intesar Haider

HTML

<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="modal-body">
 <div class="input-append date" id="datepicker1" data-date="Aug-2015" data-date-format="mm-yyyy" data-dates-disabled="Sep-2015,Oct-2015" style="display:inline-block; font-weight:bold;">
  Check In: <input  type="text" readonly="readonly" name="date1" >
  <span class="add-on"><i class="glyphicon glyphicon-calendar"></i></span>      
 </div>       
</div>

CSS

body {
  margin: 10px;
}

.datepicker-switch {
  pointer-events: none;
}

JavaScript

var datesToDisable = $('#datepicker1').data("datesDisabled").split(',');
  // or...
  // var datesToDisable = ["Sep-2015", "Oct-2015"];

var dateStart = new Date();
dateStart.setDate(dateStart.getDate()-1);

$('#datepicker1').datepicker({
        format: "mm-yyyy",
        startView: "months", 
        minViewMode: "months",
        //startDate: dateStart
        //datesDisabled: dp.dataset.datesDisabled.split()
    }).on("show", function(event) {

  var year = $("th.datepicker-switch").eq(1).text();  // there are 3 matches

  $(".month").each(function(index, element) {
    var el = $(element);

var hideMonth = $.grep( datesToDisable, function( n, i ) {
                  return n.substr(4, 4) == year && n.substr(0, 3) == el.text();
                });

    if (hideMonth.length)
      el.addClass('disabled');

    if (hideMonth.length)
      el.hide();

  });
});

//console.log($(".month").text()); // disabled">Feb</span>