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

Question

我想强调jquery datepicker上的日期,其中有附加事件(我不是在谈论js事件,而是现实生活事件:D).

1. 如何将活动日期传递给日历？
2. 如何使其可点击,要么在一个小弹出提示中显示带有其URL的事件,要么转到事件页面？

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

谢谢.

PS:我没有使用datepicker来选择日期,只是为了访问附加到日期的事件

PS2:我将在多语言网站(fr和英语)上使用它,这就是为什么我想到了datepicker

Answer 1

这绝对是可能的,在我看来,滥用datepicker小部件并不是太多.可以选择在线初始化窗口小部件,这可以完全用于上面描述的场景.

您需要采取以下几个步骤:

1. 在线初始化datepicker.将datepicker小部件附加到a,<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事件处理程序,您可以在其中告诉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);
       }
   }
   

   同样,它看起来像很多代码,但所有发生的事情是我们发现与点击日期相关的事件.在我们找到该事件后,您可以采取您想要的任何操作(例如,显示工具提示)

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