jquery - 将信息添加到 jquery datepicker 日历中的日期数字

Question

我想向 jquery 日期选择器中的日历添加附加信息。目前，日历显示月份以及日历 View 中列出的日期。我想要做的是在日期数字旁边的括号中添加一个数字。我正在为调度程序编写一个表单，我想向用户显示使用日历已在当天安排了多少事件。

我没有足够的权限向这篇文章添加图片，因此我将尽力在下面展示我正在寻找的内容。

常规日期选择器日历:

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

我想知道是否有人对如何实现我正在寻找的东西有任何想法。再次，我尝试在 jquery 日期选择器的日历中的日期后面添加一个括号中的数字。

感谢您的帮助!

Answer 1

您可以通过设置其 beforeShowDay 事件将类(class)添加到任何一天，

$( "#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 是添加该类的日期。