JQuery UI Datepicker with jQuery tipsy

Question

Any ideas on how to implement tooltips hints on jQuery UI Datepicker? Basically, I want to get a hint when a user moves to a specific date in Datepicker. Datepicker will be displayed in a line and always displayed.

Thanks!

Answer 1

Sounds pretty cool

Here is my solution. Read the comments.

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

Disadvantages:

• The _updateDatepicker method is also called when the user selects the daily form of the visible month or when you set the date via datepicker('setDate', theDate) , which may be a little inefficient.

• It relies on a private Datepicker function, if in future versions they decide to change its functionality or change its name, this code will break. Although, due to the nature of the function, I do not see this happening any time soon.

Note: My first approach was to hook into the onChangeMonthYear event for ui.datepicker , but since the event fires before replacing the dates in the calendar, the addTipsys method will add the tipsy to the calendar dates that are about to clear. Therefore, you must raise the addTipsys event AFTER the items are updated.

EASY HACK: Pick up a method on the onChangeMonthYear event of your calendar and setTimeout to trigger a drunkard. Some validation needs to be done.