Question

我在网站上运行了一个jQuery UI datepicker，其中只根据之前的下拉选项启用了某些日期（我使用MySQL查询来获取整年的日期）。收到日期后，它将传递给datepicker，并且只启用这些日期。我已经达到了预期的行为，但问题是当我获取整年的日期时，MySQL查询需要很长时间来获取日期。

我现在想要实现的是查询前3个月的日期并在datepicker上启用它们，一旦用户导航到接下来3个月的第3个月查询并在datepicker中设置日期。通过这个我不会对数据库施加压力，并且日历加载也会更快。

这可能吗？

代码非常冗长，我发布了启用/禁用日期的部分：

var datepickerDateFilter = function (date) {
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var date_string = date.getFullYear() + '-' + (month < 10 ? '0' : '') + month + '-' + (day < 10 ? '0' : '') + day;
    if ($courseDates.length > 0 && $.inArray(date_string, $courseDates) != -1) {
        return [true];
    }
    return [false];
};
$("#datepicker").datepicker({
    dateFormat: 'dd-mm-yy',
    beforeShowDay: datepickerDateFilter
});
//code goes here

Answer 1

在执行任何其他操作之前优化您的查询。至于jQuery UI datepicker：

声明一个包含可用日期的变量，按年和月分组。这将使查找更快，并且它允许您区分这两种情况：
- 尚未提取XXXX-YY的日期
- 已提取XXXX-YY的日期，但此期间没有日期
在onChangeMonthYear事件上探测该变量;如果未设置指定YYYY-MM的日期，则触发ajax请求以更新阵列。
当ajax请求完成时，更新阵列并触发refresh方法

部分示例：

var availableDates = {};
// once populated, the availableDates variable should look like:
// {
//     2013: {
//         11: {
//             20: true,
//             21: true,
//             29: true
//         }
//         12: {
//             20: true,
//             21: true,
//             29: true
//         }
//     },
//     2014: {
//         1: {
//             1: true,
//             2: true,
//             9: true
//         }
//     }
// }
function populateAvailableDates(y, m, input) {
    $.ajax("/fetch-dates", {year: y, month: m}, function (data) {
        for ( /* each d in data */ ) {
            availableDates[y][m][d] = true;
        }
        $(input).datepicker("refresh");
    });
}    
$("#datepicker").datepicker({
    beforeShowDay: function (date) {
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        return [availableDates[y] && availableDates[y][m] && availableDates[y][m][d] ? true : false, ""];
    },
    onChangeMonthYear: function (y, m) {
        if (!availableDates[y]) {
            availableDates[y] = {};
        }
        if (!availableDates[y][m]) {
            availableDates[y][m] = {};
            populateAvailableDates(y, m, this);
        }
    }
});
// populate the array with datepicker's defaultDate
populateAvailableDates(2013, 11, $("#datepicker")[0]);

jQuery UI datepicker通过AJAX启用可见月份的日期

1 个答案: