Набор месяцев инвалидов в начальной загрузки DatePicker используя массив дат строк не работает

Question

У меня есть DatePicker, которая имеет следующую конфигурацию:

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); 

Затем асинхронный вызов извлекает массив дат (здесь представлен переменной datesToDisable), которые передаются в datepicker используя метод setDatesDisabled (как указано в последней строке фрагмента кода), но он не работает, поскольку месяцы для прошедших дат по-прежнему можно выбрать в календаре.

Вопросы: Является ли это правильным способом установить отключенные месяцы в календаре datepicker загрузки? Мне нужно передать все даты в течение месяца, чтобы отключить определенный месяц?

Вы можете проверить это в следующем jsfiddle: http://jsfiddle.net/javlc/52g9xcz2/

Answer 1

Вы можете использовать функцию .on("show") datepicker для изменения отображения. Я использовал jQuery's grep, чтобы найти совпадения с вашим массивом datesToDisable. Если есть какие-либо соответствия, я применяю класс disabled к этому элементу.

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 пример: https://jsfiddle.net/k144qmct/1/

Answer 2

Bootstrap setDatesDisabled принимает только dates и не months. Одним из решений, которое я разрабатываю, является следующее:

Прежде всего, мы должны создать новый массив: var dates=[].

Для каждого предмета из массива datesToDisable, мы должны push в dates все даты с позиции month.

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

Например, у нас есть 2016-11-01. Вы должны добавить все days из November(11) в месяц.

Для этого я использовал метод daysInMonth, чтобы узнать количество дней в году.

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

daysInMonth(2016,11,0) //30 

И последний шаг к passдаты массива в datesDisabled собственности.

Адрес working solution.