javascript - 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 的数组，其中包含我需要突出显示的日期的一些信息。供您引用，这里是我正在使用的示例 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;
}

如果有任何帮助，我使用 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
    ]
};

编辑:根据评论，如果您想覆盖背景，CSS 应如下所示:

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