Set disabled months in bootstrap datepicker using array of date strings is not working

Question

I have a datepicker which has the following configuration:

HTML:

<div class="input-group date">
  <input type="text" id="datepick" class="form-control"/>
  <span class="input-group-addon">
    <i class="glyphicon glyphicon-calendar"></i>
  </span>
</div>

JS:

var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
                      "2016-05-01","2016-04-01","2015-12-01","2015-09-01"];

$('#datepick').datepicker({
  format: 'yyyy-mm-dd',
  minViewMode: 1, // 1 for months
  maxViewMode: 2, // 2 for years
  startDate: '-36m',
  endDate: '+0m',
  autoclose: true,
  toggleActive: true
});

$('#datepick').datepicker('setDatesDisabled', datesToDisable);

Then later an async call retrieves an array of dates (here represented by the datesToDisable variable) which are passed to the datepicker using the setDatesDisabled method (as indicated on the last line of the code snippet), but it is not working, as the months for the passed dates are still selectable within the calendar.

Questions: Is this the correct way to set disabled months in the bootstrap datepicker calendar? Will I need to pass all dates within a month to disable a particular month?

You can check it in the following jsfiddle: http://jsfiddle.net/javlc/52g9xcz2/

Answer 1

You can use the datepicker's .on("show") function to alter the display. I've used jQuery's grep to find matches with your datesToDisable array. If there are any matches then I apply the disabled class to that element.

var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
                      "2016-05-01","2016-04-01","2015-12-01","2015-09-01"];

var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 
              'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

$('#example1').datepicker({
    format: 'yyyy-mm-dd',
    minViewMode: 1, // 1 for months
    maxViewMode: 2, // 2 for years
    startDate: '-36m',
    endDate: '+0m',
    autoclose: true,
    toggleActive: true}).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(0, 4) == year && months[parseInt(n.substr(5, 2)) - 1] == el.text();
                });

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

    /* To hide them...
    if (hideMonth.length)
      el.hide();
    */
  });
});

JsFiddle example: https://jsfiddle.net/k144qmct/1/

Answer 2

Bootstrap setDatesDisabled accepts only dates and not months. One solution that I'm develop is the following:

First of all, we have to create a new array: var dates=[].

For every item from datesToDisable array, we need to push into dates all the dates from item month.

var datesToDisable = ["2016-11-01","2016-08-01","2016-06-01",
                  "2016-05-01","2016-04-01","2015-12-01","2015-09-01"];

For instance, we have 2016-11-01. You have to add all days from November(11) month.

For this, I used daysInMonth method in order to find out the number of the days for a month.

function daysInMonth(month,year) {
    return new Date(year, month, 0).getDate();
}

daysInMonth(2016,11,0) //30

And the last step is to pass dates array to datesDisabled property.

Here is working solution.