在 jquery datepicker 日历中添加信息到天数答案

【问题标题】：Adding info to day numbers in jquery datepicker calendar在 jquery datepicker 日历中添加信息到天数
【发布时间】：2012-02-22 13:06:57
【问题描述】：

我想在 jquery datepicker 的日历中添加额外的信息。目前，日历显示月份，日历视图中列出了日期。我想要做的是在日期编号旁边的括号中添加一个数字。我正在为调度程序编写一个表单，我想向用户显示已经使用日历为当天安排了多少活动。

我没有足够的权限在这篇文章中添加图片，所以我会尽力在下面展示我要查找的内容。

常规日期选择器日历：

Su   M   T   W   TH  F   Sa
 1   2   3   4   5   6   7
 8   9  10  11   12  13  14

我在寻找什么：

  Su     M      T      W      TH     F      Sa
 1(2)   2(1)   3(1)   4(1)   5(1)   6(1)   7(8)
 9(1)   10(2)  11(5)  12(4)  13(3)  14(6)  15(2)

**the numbers in parenthesis () are the number of appointments
  already scheduled for that day.**

我从 mySQL 查询中获得了需要输入到括号中的信息。它返回日期和计数。我可以格式化日期以匹配您的解决方案所需的任何内容。

我曾想过创建以特定日期命名的变量，定义为计数（例如 var 2012-1-30 = 1，var 2012-1-31 = 4）。然后，当日期与我创建的变量日期匹配时，我会以某种方式让 datepicker 函数添加定义。我不确定是否有办法将它添加到 datepicker 函数中。

我尝试过但无法开始工作的另一个解决方案是编辑 datepicker 函数以向每一天添加一个类，以便我可以使用 jquery 选择每一天。例如，2012 年 1 月 30 日有一个类似于 [class="date_2012-1-30"] 的类。我可以使用类以这种方式手动选择和编辑日期（这就是我编辑第二张图片的方式），但我无法让日期选择器使用此信息。我在 datepicker 中尝试了 beforeshow 事件，认为我可以让日历在匹配类中的文本显示之前对其进行编辑，但这不起作用。

我想知道是否有人对如何完成我正在寻找的东西有任何想法。同样，我试图在 jquery datepicker 的日历中的日期之后的括号中添加一个数字。

感谢您的帮助！

【问题讨论】：

标签： jquery calendar datepicker

【解决方案1】：

您可以通过设置beforeShowDay 事件将课程添加到任何一天，

$( "#datepicker" ).datepicker({
   beforeShowDay: function(date) {
        return [true, 'date_' + date.getTime()];
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<p>Date: <input type="text" id="datepicker"></p>

其中 dateday 是要添加到日期的类，而 date 是添加类的日期。

【讨论】：