jQuery Datepicker beforeShowDay不起作用

Question

我正在使用jQuery UI Datepicker實現一個簡單的日歷。 在其中，我將回調函數ShowShowDay回調到自定義函數，因此我可以在其上突出顯示不同類型的日子（工作日，銀行假期等），但是，返回的類似乎未應用。 這是初始化日期選擇器的代碼：

$('#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的數組，其中包含一些我需要突出顯示的日期的信息。 供您參考，這是我正在使用的示例calendarDays：

{"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;
}

如果有幫助，我使用了谷歌瀏覽器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
    ]
};

編輯 ：基於注釋，如果您想覆蓋背景，則CSS應該如下所示：

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