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

Question

我在网站上运行了一个 jQuery UI 日期选择器，其中仅根据之前的下拉选择启用某些日期（我使用 MySQL 查询来获取全年的日期）。一旦收到日期，它就会被传递给日期选择器，并且仅启用这些日期。我已经实现了预期的行为，但问题是当我获取全年的日期时，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 日期选择器：

• 声明一个保存可用日期的变量，按年和月分组。这将使查找速度更快，而且它允许您区分这两种情况：
  • 尚未获取 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]);