jQuery UI Datepicker con jQuery tipsy

¿Alguna idea de cómo implementar consejos útiles sobre la UI Datepicker de jQuery? Básicamente, quiero obtener una información sobre herramientas cuando el usuario se mueve en una fecha específica en el Selector de fechas. El Selector de fecha se mostrará en línea y siempre visible.

¡Gracias!

Eso suena muy bien,

Aquí está mi solución. Lee los comentarios.

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

Inconvenientes:

  1. El método _updateDatepicker se llama también cuando el usuario selecciona un día del mes visible, o cuando establece una fecha a través de datepicker('setDate', theDate) , lo que podría ser un poco ineficiente.

  2. Se basa en una función privada del Selector de fechas, si en futuras versiones deciden cambiar su funcionalidad, o cambiar el nombre, este código se interrumpirá. Aunque debido a la naturaleza de la función no veo que suceda pronto.

NOTA: Mi primer enfoque fue engancharse al evento onChangeMonthYear del ui.datepicker , pero como el evento se activa, antes del reemplazo de las fechas en el calendario, el método addTipsys , agregaría las sugerencias a las fechas del calendario que son aproximadamente para obtener aclarado. Por lo tanto, la necesidad de llamar al evento addTipsys DESPUÉS de que los elementos se actualicen.

EASY HACK: onChangeMonthYear un método al evento onChangeMonthYear de su calendario y haga un setTimeout para llamar a los tipsy’s. Será necesario realizar alguna validación.