将条目数添加到日期选择器字段中

Question

我目前正在使用 jQuery Datepicker 来选择一个 'to' 和 'from' 范围来过滤 mysql 搜索结果。

我想要的是，如果我能以某种方式预读 mysql 数据库，那么当用户单击日期选择器时，弹出的日历会显示（可能在括号中）每天在数据库中找到的项目数。例如

     Jan   2013
M  T  W  T  F  S  S 
--------------------
1  2  3  4  5  6  7
  (1)(5)(8)
--------------------
8  9  10 11 12 13 14
        (9)(3)
--------------------
15 16 17 18 19 20 21
(1)(1)(5)(6)
--------------------
22 23 24 25 26 27 28
--------------------
29 30 31
(8)
--------------------

为了解释更多，它是一个照片库应用程序。我希望能够选择一个日期范围来显示图片...但是如果用户不知道图片的日期并且只是“浏览”，那么在日历上会指示哪些日子有照片（由number) 那就更好了。

也许我可以这样做，内容示例中的日期：http://keith-wood.name/datepick.html#daymods

我最初设想了一个 jquery 函数，它在数据库中查询一组照片及其拍摄日期，总结起来。但是，如果那里有很多，那可能会很消耗......所以也许它可以即时完成，即当点击日期选择器并显示 1 个月时，它只查询了那个月的结果......但是然后如果月份发生变化，它必须在运行中再次查询....

我认为这最终可能超出了我的能力范围，但我们拭目以待。

提前致谢。

Answer 1

一个简单的解决方案是获取所有日期的照片总数并将它们存储在一个对象中。即使有多年的数据，如果您只存储每天的计数，我不认为这会消耗太多太多内存。

您可以使用 Ajax 请求获取数据：

$.ajax({
   dataType: "json",
   url: url,
   data: { date: date },
   success: success
});

其中url 是从您的Web 服务器请求的URL，success 是处理响应的回调。您将需要编写一些服务器端代码来处理请求并以您可以使用 JavaScript 轻松解释的格式（例如 JSON）从 MySQL 返回数据。

获得数据后，您可以使用日期选择器的beforeShowDay 选项在日历中的每个日期显示之前对其进行操作。例如，您可以添加一个工具提示，其中包含该日期的照片总数：

/* Assume data stored in var count */
$("#datepicker").datepicker(
    beforeShowDay: function(date) {
        return [ true, "", count[date] ];
    }
);

这是一个严重的过度简化（例如，您应该进行某种错误检查），但您明白了要点。这种方法有一个很好的例子here。

如果您担心内存消耗，您可以只预加载当前月份的计数，并在用户更改日期选择器中可见的月份或年份时发送 Ajax 请求来更新数据：

$("#datepicker").datepicker(
    onChangeMonthYear: function(year, month, inst) {
        /* Ajax request */
    }
);