jQuery Datepicker beforeShowDay不工作

Question

我正在使用jQuery UI Datepicker來實現一個簡單的日曆。其中，我將ShowDay之前的回調函數設置爲自定義函數，以便我可以突出顯示不同類型的日子（工作日，銀行假日等），但是我返回的類似乎不適用。這裏是初始化日期選擇器代碼：

$('#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有一個叫做天的日子一些信息的數組我需要突出顯示。爲了您的信息，這裏是我使用的樣品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; 
}