jQuery UI Datepicker与jQuery tipsy

有关如何在jQuery的UI Datepicker上实现技巧工具提示的任何想法？ 基本上我想在用户在Datepicker中的特定日期移动时获得工具提示。 Datepicker将以内联方式显示并始终可见。

谢谢！

Answer 1

听起来很酷，

这是我的解决方案。 阅读评论。

(function($){ /** * Returns a dictionary, where the keys are the day of the month, * and the value is the text. * @param year - The year of the events. * @param month - The month of the events. * @param calendarID - Events for a specific calendar. */ function getMonthEvents(year, month, calendarId){ return {11: "My birthday.", 23: "My anniversary" }; } // Receives January->1 function addTipsys(year, month, calendarId){ var theEvents = getMonthEvents(year, month, calendarId); var theDateLinks = $('#' + calendarId + ' .ui-datepicker-calendar a'); for(eventDay in theEvents){ // Minus one, because the date in the tipies are regular dates (1-31) // and the links are 0-based. theDateLinks.eq(eventDay-1) // select the right link .attr('original-title', theEvents[eventDay]) // set the text .tipsy(); // init the tipsy, set your properties. } } // Because the the event `onChangeMonthYear` get's called before updating // the items, we'll add our code after the elements get rebuilt. We will hook // to the `_updateDatepicker` method in the `Datepicker`. // Saves the original function. var _updateDatepicker_o = $.datepicker._updateDatepicker; // Replaces the function. $.datepicker._updateDatepicker = function(inst){ // First we call the original function from the appropiate context. _updateDatepicker_o.apply(this, [inst]); // No we can update the Tipsys. addTipsys(inst.drawYear, inst.drawMonth+1, inst.id); }; // Finally the calendar initializer. $(function(){ // Creates the date picker, with your options. $("#datepicker").datepicker(); // Gets the date and initializes the first round of tipsies. var currentDate = $('#datepicker').datepicker('getDate'); // month+1 because the event considers January->1 // Last element is null, because, it doesn't actualy get used in the hanlder. addTipsys(currentDate.getYear(), currentDate.getMonth()+1, 'datepicker'); }); })(jQuery); 

不便之处：

1. 当用户从可见月份中选择一天，或者通过datepicker('setDate', theDate)设置日期时datepicker('setDate', theDate) ，这可能效率不高。

2. 它依赖于Datepicker的私有函数，如果在将来的版本中他们决定更改它的function，或者更改名称，这段代码就会中断。 虽然由于function的性质，我不认为很快就会发生这种情况。

注意：我的第一种方法是挂钩ui.datepicker的onChangeMonthYear事件，但由于事件被触发，在替换日历中的日期之前， addTipsys方法会将addTipsys添加到关于日历的日期日期。得到澄清 因此需要在元素刷新后调用addTipsys事件。

EASY HACK：将方法挂钩到日历的onChangeMonthYear事件，然后执行setTimeout来调用tipsy。 需要进行一些validation。