jQuery UI Datepicker con jQuery tipsy

Question

¿Alguna idea de cómo implementar tipsy información 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 Datepicker. El Datepicker se mostrará en línea y siempre visible.

Gracias!

Answer 1

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 _updateDatepicker método de ser llamado también cuando el usuario selecciona formar un día del mes visible, o cuando se 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 Datepicker, si en futuras versiones deciden cambiar su funcionalidad, o cambiar el nombre, este código se romperá. Aunque debido a la naturaleza de la función, no creo que eso suceda pronto.

NOTA: Mi primer acercamiento fue conectar a la onChangeMonthYear caso de la ui.datepicker, pero debido a que el evento se dispara, antes de la sustitución de la fecha en el calendario, el método addTipsys, añadiría el tipsy's a las fechas del calendario que están a punto de ser aclaradas. Por lo tanto, es necesario llamar al evento addTipsys DESPUÉS de que los elementos se actualicen.

FÁCIL Hack: Hook un método para la onChangeMonthYear evento de su calendario, y hacer un setTimeout para llamar a los de achispados. Alguna validación tendrá que hacerse.