jQuery UI Datepicker：如何添加特定date的可点击事件？

我想要突出jquery datepicker上有附加事件的date （我不是在谈论js事件，而是现实生活中的事件：D）。

1. 如何将活动date传递给日历？
2. 如何使它可点击，要么显示事件（S）与他们的URL在一个小的popup式提示，要么去事件页面？

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

谢谢。

PS： 我不使用dateselect器来select一个date，只能访问附加到date的事件

PS2：我会在多语言网站（fr和英文）上使用它，这就是为什么我想到datepicker

Answer 1

这绝对是可能的，在我看来，不要滥用datepicker小部件。 有一个选项可以在线初始化小部件，可以用于上面描述的场景。

有几个步骤你必须采取：

1. 在线初始化dateselect器。 将dateselect器小部件附加到<div>以便它始终显示，而不必将其附加到input ：

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

2. 点击beforeShowDay事件以突出显示具有特定事件的date。 另外，在一个数组中定义你的事件，你可以填充并发送到客户端：

   事件数组：

    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; }, 

   这可能看起来有些复杂，但是它所做的只是在datepicker中高亮显示上面定义的events数组中的条目。

3. 定义一个onSelect事件处理程序，您可以告诉datepicker单击某一天时要执行的操作：

    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); } } 

   再次，它看起来像很多代码，但所有这一切发生的是，我们发现事件与点击date相关联。 在我们发现事件后，您可以采取任何您想要的操作（例如，显示工具提示）

这是一个完整的工作示例： http : //jsfiddle.net/Zrz9t/1151/ 。 确保导航到二月/三月查看事件。

Answer 2

除了安德鲁·惠特克 （ Andrew Whitaker）的解决scheme之外，还有另外一种方法可以做到这一点（实际上它是一种黑客攻击，但实际上它可能是完美的，因为也许标题或date并不总是一个好的标识）

注意 ：请首先阅读Andrew Whitaker解决scheme，并在此处查看更改

 // 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") }]);