jquery - 带事件的日期选择器？

Question

有没有一个jquery插件可以让我有一个像矩形一样的小日历，就像在日期选择器中一样，并且一些日期会有不同的颜色。当我用鼠标浏览日期时，会弹出一个窗口，说明当天安排了哪些事件。当然，我会用事件填充事件数组;-)

我找到的只是日期选择器(小)或日历(全屏大)。我的网页需要的是一个小日历和一个简单的鼠标悬停，可以显示我希望显示的文本。

存在这样的东西吗？

Answer 1

正如其他人指出的，这可以通过 jQueryUI 的 datepicker 实现。 .

Datepicker 有一些内置功能可以帮助您实现这一目标。具体来说， beforeShowDay 事件将让您自定义每天的外观和行为，而无需太多代码:

1. 创建一个包含可从 datepicker 引用的事件的对象的事件处理程序:

   var Event = function(text, className) {
       this.text = text;
       this.className = className;
   };
   
   var events = {};
   events[new Date("02/14/2011")] = new Event("Valentines Day", "pink");
   events[new Date("02/18/2011")] = new Event("Payday", "green");
   

   此代码只是创建一个对象，其中“键”是事件日期，“值”是事件数据。

2. 为了使 datepicker小部件始终显示(例如不需要 input)，只需将小部件应用于 div :

   HTML:

   <div id="dates"></div>
   

   JavaScript:

   $("#dates").datepicker({....});
   

3. 点击 beforeShowDay事件，并返回适当的数组。 datepicker将自动应用您指定的工具提示和类。这就是Event的地方我们上面定义的对象派上用场:

   $("#dates").datepicker({
       beforeShowDay: function(date) {
           var event = events[date];
           if (event) {
               return [true, event.className, event.text];
           }
           else {
               return [true, '', ''];
           }
       }
   });
   

   这可能是最棘手的部分。 beforeShowDay事件处理程序希望您返回一个结构如下的数组:

   [ 0 ] equal to true/false indicating whether or not this date is selectable, [ 1 ] equal to a CSS class name(s) or '' for the default presentation, and [ 2 ] an optional popup tooltip for this date.

   所以我们要做的是查找传递到处理 beforeShowDay 的函数的日期上的事件。事件并从事件对象返回数据(如果存在)。

看起来很多，但当你把它们放在一起看时，还不算太糟糕。查看此处的示例:http://jsfiddle.net/andrewwhitaker/rMhVz/1/

请注意，CSS 类必须使用 !important覆盖 datepicker 的默认背景，并实际应用于a日期内的标签 tr