jQuery UI Datepicker：如何在特定日期添加可点击事件？

Question

我想在 jquery datepicker 上突出显示附加事件的日期（我说的不是 js 事件，而是现实生活中的事件：D）。

1. 如何将活动日期传递到日历？
2. 如何使其可点击，或者在小弹出提示中显示事件及其 URL，或者转到事件页面？

请问是否有可用的插件或资源（如教程）来帮助我实现这一目标？

谢谢。

PS：我没有使用日期选择器来选择日期，只是为了访问附加到日期的事件

PS2：我将在多语言网站（法语和英语）上使用它，这就是我想到 datepicker 的原因

Answer 1

这绝对是可能的，而且在我看来并没有过多地滥用 datepicker 小部件。有一个选项可以在线初始化小部件，它可以完全用于您上面描述的场景。

您必须采取几个步骤：

1. 在线初始化日期选择器。将 datepicker 小部件附加到 <div>，这样它就会始终出现，而您不必将它附加到 input：

   $("div").datepicker({...});
   

2. 点击beforeShowDay 事件以突出显示特定事件的日期。此外，在一个数组中定义您的事件，您可以填充该数组并将其发送到客户端：

   事件数组：

   var events = [ 
       { Title: "Five K for charity", Date: new Date("02/13/2011") }, 
       { Title: "Dinner", Date: new Date("02/25/2011") }, 
       { Title: "Meeting with manager", Date: new Date("03/01/2011") }
   ];
   

   事件处理程序：

   beforeShowDay: function(date) {
       var result = [true, '', null];
       var matching = $.grep(events, function(event) {
           return event.Date.valueOf() === date.valueOf();
       });
   
       if (matching.length) {
           result = [true, 'highlight', null];
       }
       return result;
   },
   

   这可能看起来有点复杂，但它所做的只是突出显示日期选择器中的日期，这些日期在上面定义的 events 数组中具有条目。

3. 定义一个onSelect 事件处理程序，您可以在其中告诉日期选择器在单击某一天时要执行的操作：

   onSelect: function(dateText) {
       var date,
           selectedDate = new Date(dateText),
           i = 0,
           event = null;
   
       /* Determine if the user clicked an event: */
       while (i < events.length && !event) {
           date = events[i].Date;
   
           if (selectedDate.valueOf() === date.valueOf()) {
               event = events[i];
           }
           i++;
       }
       if (event) {
           /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
           alert(event.Title);
       }
   }
   

   同样，它看起来有很多代码，但所发生的只是我们正在查找与点击日期相关联的事件。在我们找到该事件后，您可以采取任何您想要的操作（例如显示工具提示）

这是一个完整的工作示例：http://jsfiddle.net/Zrz9t/1151/。请务必导航到 2 月/3 月以查看活动。

Answer 2

除了 Andrew Whitaker 解决方案之外，还有另一种方法（实际上它是一种 hack，但实际上它可能对其他人来说是完美的，因为标题或日期可能并不总是一个好的标识符）

注意：请先阅读Andrew Whitaker解决方案并在此处查看更改

// date picker
$("div").datepicker({
    // hook handler
    beforeShowDay: function(tdate) {
        var mydata = $(this).data("mydata");
        var enabled = false;
        var classes = "";
        var title = date;
        $.each(mydata, function() {
            if (this.date.valueOf() === tdate.valueOf()){
                enabled = true;
                classes = "highlight";
                title = title + '" data-id ="'+this.id;// my hack to add additional attributes ;)
            }
        });        
        return [enabled,classes,title];
    },
    // event handler
    onSelect: function() {
        var id = $(this).find(".ui-datepicker-current-day").attr("data-id");
        mydata = $(this).data("mydata"),
        selectedData = null;        
        /* search for data id */
        $.each(mydata,function(){
            if (this.id == id){
                selectedData = this;
            }
        });
        if (selectedData) {
            /* If the event is defined, perform some action here; show a tooltip, navigate to a URL, etc. */
            alert(selectedData);
        }
    }
}).data("mydata",
    // your data
    [{
        id:1,
        title: "Five K for charity", 
        date: new Date("02/13/2011")
    }, 
    {
        id:2,
        title: "Dinner", 
        date: new Date("02/25/2011")
    }, 
    {
        id:3,
        title: "Meeting with manager", 
        date: new Date("03/01/2011")
    }]);