jQuery UI Datepicker с jQuery tipsy

Question

Любые идеи о том, как реализовать tipsy всплывающие подсказки по пользовательскому интерфейсу jQuery's 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. _updateDatepicker метод прибудет называеться также, когда пользователь выбирает день образует видимый месяц, или когда вы установили дату, которая может быть немного неэффективными через datepicker('setDate', theDate), ,

2. Он полагается на частную функцию Datepicker, если в будущих версиях они решили изменить его функциональность или изменить имя, этот код сломается. Хотя из-за характера функции я не вижу, что это происходит в ближайшее время.

Примечание: Мой первый подход был зацепить к onChangeMonthYear случае ui.datepicker, а потому, что событие срабатывает, прежде чем замена даты в календаре, метод addTipsys, добавили бы подкидывают к датам календаря, которые собираются очистить. Поэтому необходимо вызвать событие addTipsys ПОСЛЕ того, как элементы будут обновлены.

ЛЕГКО HACK: Крюк метод для onChangeMonthYear события вашего календаря, и сделать SetTimeout называть подвыпивших х. Необходимо выполнить некоторую проверку.