Bootstrap 3 DateTimePicker v4 Disable Month

1
votes

I am using the Bootstrap 3 DateTimePicker v4. I have the calendar setup in "months" viewMode, "MM/YYYY" format and inline. I am attempting to create a month/year picker that could have disabled months, depending on availability for a reservation system. I am able to disable single dates, but not entire months in the month view. I was curious if anyone else has attempted this before?

Here is a link to my jsFiddle: http://jsfiddle.net/0Ltv25o8/2150/

2
javascriptjquerytwitter-bootstrap
Have you looked at this? - sandeep s

2 Answers

1
votes

I ended up writing a function that loops through the months and then I can add a class of available or disabled depending on the input array of months with availability. Here is the snippet of code.

function DisableMonths(valid_months) {
    var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    $('.month').each(function() {   
        var month = $(this).html()
        ,   index = +months.indexOf(month) + 1;

        var index_valid = valid_months.indexOf(index.toString());

        if (index_valid >= 0) {
            $(this).addClass('available').removeClass('disabled');
        }
        else {
            $(this).addClass('disabled').removeClass('available');
        }
    });
}
1
votes

I came up with a similar solution, here's the general gist. (I've got a working example at the bottom too)

var year = [],
    yearWatch = 2015;

Year[2015] = ["Jan", "Feb", "Sep", "Dec"];
Year[2016] = ["Apr", "May", "Oct", "Nov"];

disableFromVar = function() {
  $('#txtCalendar .month').removeClass('disabled');
  $('#txtCalendar .month').each(function(i, v) {
    if (jQuery.inArray($(v).html(), Year[yearWatch]) > -1) {
      $(v).addClass('disabled');
    }
  });
}

http://jsfiddle.net/link2twenty/5psu9tf8/