jQuery Datepicker beforeShowDay не работает

Question

Я использую jQuery UI Datepicker для реализации простого календаря.В нем есть обратный вызов beforeShowDay для пользовательской функции, поэтому я могу выделить разные типы дней (рабочие дни, праздничные дни и т. Д.), Однако возвращаемые мной классы, похоже, не применяются.Вот код для инициализации средства выбора даты:

$('#jdatepicker').datepicker(
        { 
            dateFormat: 'dd-mm-yyyy',
            beforeShowDay: renderCalendarCallback,
            onChangeMonthYear: onMonthChanged,
            onSelect: onCalendarSelectedDate
        }
    );

Это работает, и renderCalendarCallback вызывается и выглядит следующим образом:

function renderCalendarCallback(date) {
    if (initialLoad) return [true, ''];
    $.each(
        calendarDays.days,
        function (intIndex, objValue) {
            if (objValue.number == date.getDate()) {
                if (objValue.dayType == NonWorkingDay) {
                    alert('nonworkingday - ' + date.getDate());
                    return [true, 'nonworkingday'];
                }
                else if (objValue.dayType == ModifiedWorkingDay) {
                    alert('modifiedday - ' + date.getDate());
                    return [true, 'modifiedday'];
                }
                else if (objValue.dayType == WorkingDay) {
                    alert('workingday - ' + date.getDate());
                    return [true, 'workingday'];
                }
            }
    });
    //Here for the default days
    return [true, ''];
}

В этом методе calendarDays имеет массив с именами days.информация о днях, которые мне нужно выделить.Для вашей информации, вот пример календарного дня, который я использую:

{"days":[{"i":2,"dayType":2,"number":8},{"i":4,"dayType":3,"number":12}]}

Когда я запускаю страницу, я получаю два соответствующих предупреждения о том, что я пробежал через ifs, поэтому возвращаемое значение должно быть:

return [true, 'nonworkingday'];

В одном случае и

return [true, 'modifiedworkingday'];

в другом (это проверено, потому что я вижу предупреждения, появляющиеся в браузере.

Однако оба дняв календаре стиль точно такой же, как и у стиля по умолчанию. Мой CSS выглядит следующим образом:

.nonworkingday {
    background-color: #F7BE81 !important;
}
.modifiedday {
    background-color: #F4FA58 !important;
}
.workingday {
    background-color: #ACFA58 !important;
}

Если это поможет, я использовал инструменты разработчика Google Chrome для проверки сгенерированной таблицы с помощью календаря иделения таблиц 8-го и 12-го дней выглядят так:

<td class=" " onclick="DP_jQuery_1290097799897.datepicker._selectDay('#jdatepicker',10,2010, this);return false;"><a class="ui-state-default" href="#">8</a></td>

Почему класс пуст? Разве он не должен иметь класс, который я возвратил из обратного вызова? Что я делаю неправильно?

Спасибо!

Answer 1

У меня работает: http://jsfiddle.net/ryleyb/b6V3W/1/

Так что разберись, что ты сделал по-другому.Я сделал так, как предложил @Pointy, и перестроил ваш calendarDays объект так, чтобы каждая позиция массива представляла день месяца.Таким образом, вы переходите прямо к позиции массива в вашем обратном вызове вместо того, чтобы проходить его каждый день.

var calendarDays = {
    days: [
    undefined, undefined,
    {
        "dayType": WorkingDay,
        "i": 5}, // <-- this is in position 2 in the array, so it represents day 2
    undefined, undefined, undefined, undefined,
    {
        "dayType": NonWorkingDay,
        "i": 9}, // <-- position 7, 7th of the month
    {
        "dayType": ModifiedWorkingDay,
        "i": 1} // <-- 8, etc
    ]
};

EDIT : на основе комментариев, если вы хотите переопределитьфон, CSS должен выглядеть так:

.nonworkingday {
    background: none !important;
    background-color: #F7BE81 !important;
}