I am using bootstrap's datepicker, set to viewMode: "years", minViewMode: "months" and have a need to disable certain months in any year I choose depending on an external data.
For example, in the following image I must enable the quarters, so I should choose only January, April, July and September, the others must be disabled or hidden.
Another example: if it is semi-annual, you should be able to choose only January and July as in the image, the other months disabled or hidden.
This is what I did, but it doesn't work properly. Only if I mouse over the boxes it disables them, but I can still choose them
$('#fechaf').datepicker({
autoclose: true,
format: 'yyyy/mm',
viewMode: "years",
minViewMode: "months"
}).on('changeDate', function(ev) {
var valid_months = "1,7";
var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
$(".month").hover(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('active').removeClass('available');
}
});
}).data('datepicker')