我希望在点击UI Datepicker中的日期时显示工具提示弹出窗口:
(function($) {
var events = [
{ Title: "Five K for charity", Date: new Date("09/16/2013") },
{ Title: "Dinner", Date: new Date("09/17/2013") },
{ Title: "Meeting with manager", Date: new Date("09/18/2013") }
];
//console.log(events[1]);
$("#my-calendar" ).datepicker({
beforeShowDay: function(date) {
var result = [true, '', null];
var matching = $.grep(events, function(event) {
//console.log(event.Date.valueOf() );
return event.Date.valueOf() === date.valueOf();
});
if (matching.length) {
result = [true, 'highlight', null];
}
return result;
},
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. */
var day = new Date(event.Date).getDate().toString();
$("a.ui-state-default:contains("+day+")").tooltip({content:'yay'}); //selector definitely returns the relevant day
}
}
});
})(jQuery);
但是,单击日期时不会显示工具提示。工具提示最终需要包含事件的链接。
示例here