JSFiddle - React, Tailwind, and code Playground

by Tejash Soni

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/css/datepicker.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.0/js/bootstrap-datepicker.js"></script>
<div class="input-group date" style="width: 200px">
  <input type="text" id="example1" class="form-control" style="cursor: pointer" />
  <span class="input-group-addon">
            <i class="glyphicon glyphicon-calendar"></i>
        </span>
</div>

CSS

body {
  margin: 10px;
}

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

JavaScript

var monthsToShow = ['May', 'Nov'];

$('#example1').datepicker({
  format: "M yyyy",
  minViewMode: 1,
  autoclose: true
}).on("show", function(event) {
  $(".month").each(function(index, element) {

    var el = $(element);

		// to make other months inactive use this:
		if ($.inArray(el.text(), monthsToShow) >= 0)
      el.removeClass('disabled');
    else
      el.addClass('disabled');

		// to hide inactive months use this:
		if ($.inArray(el.text(), monthsToShow) >= 0)
      el.show();
    else
      el.hide();    
  });
});

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