jQuery UI Datepicker：如何在特定日期添加可点击事件？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5578259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery UI Datepicker : how to add clickable events on particular dates?
提问by sf_tristanb
I want to highlight the dates on jquery datepicker where there are events attached to it(i'm not talking about js event, but real life events :D).
我想突出显示 jquery datepicker 上有事件附加的日期（我不是在谈论 js 事件，而是在谈论现实生活中的事件：D）。
- How to pass the event dates to the calendar?
- How to make it clickable, either to display the event(s) with their url in a small popup tip, either to go to the event page?
- 如何将事件日期传递给日历？
- 如何使其可点击，或者在一个小的弹出提示中显示带有 url 的事件，或者转到事件页面？
Are there already available plugins or ressources (like tutorials) to help me achieve that please?
是否已经有可用的插件或资源（如教程）来帮助我实现这一目标？
Thanks.
谢谢。
PS: I'm not using the datepicker to pick a date, only to access the events attached to a date
PS：我没有使用日期选择器来选择日期，只是为了访问附加到日期的事件
PS2: I'll use it on a multilingual website (fr and english), that's why I thought of datepicker
PS2：我会在多语言网站（法语和英语）上使用它，这就是我想到日期选择器的原因
回答by Andrew Whitaker
This is definitely possible, and in my opinion not too much of an abuse of the datepicker widget. There is an option to initialize the widget in-line, which can be used for exactly the scenario you describe above.
这绝对是可能的，在我看来并没有过多地滥用日期选择器小部件。有一个选项可以在线初始化小部件，它可以完全用于您上面描述的场景。
There are a couple of steps you'll have to take:
您必须执行以下几个步骤：
Initialize the datepicker in-line. Attach the datepicker widget to a
<div>so that it will always appear and you won't have to attach it to aninput:$("div").datepicker({...});Tap into the
beforeShowDayevent to highlight dates with specific events. Also, define your events in an array that you can populate and send down to the client:Events array:
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") } ];Event handler:
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; },This might look a bit complex, but all it's doing is highlighting dates in the datepicker that have entries in the
eventsarray defined above.Define an
onSelectevent handler where you can tell the datepicker what to do when a day is clicked: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); } }Again, it looks like a lot of code, but all that's happening is that we're finding the event associated with the date clicked. After we find that event, you can take whatever action you want (show a tooltip, for example)
内联初始化日期选择器。将日期选择器小部件附加到 a
<div>以便它始终显示并且您不必将其附加到input：$("div").datepicker({...});点击
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上面定义的数组中具有条目。定义一个
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); } }同样，它看起来像很多代码，但所发生的一切都是我们找到了与点击日期相关的事件。在我们找到该事件后，您可以执行任何您想要的操作（例如显示工具提示）
Here's a complete working example: http://jsfiddle.net/Zrz9t/1151/. Make sure to navigate to February/March to see the events.
这是一个完整的工作示例：http: //jsfiddle.net/Zrz9t/1151/。确保导航到二月/三月以查看事件。
回答by Fareed Alnamrouti
in addition to Andrew Whitakersolution there is another way to do it (actually its a hack but actually its maybe perfect for someone else because maybe the title or date is not always a good identifier)
除了Andrew Whitaker解决方案之外，还有另一种方法可以做到这一点（实际上它是一种黑客行为，但实际上对其他人来说可能是完美的，因为也许标题或日期并不总是一个好的标识符）
Note: please read Andrew Whitakersolution first and see the changes here
注意：请先阅读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")
}]);
