jQuery UI Datepicker với jQuery tipsy

Question

Bất kỳ ý tưởng nào về cách triển khai tipsy chú giải công cụ trên Trình chỉnh sửa ngày của giao diện người dùng của jQuery? Về cơ bản tôi muốn nhận được một chú giải công cụ khi người dùng di chuyển vào một ngày cụ thể trong Datepicker. Datepicker sẽ được hiển thị nội dòng và luôn hiển thị.

Cảm ơn!

Answer 1

Điều đó có vẻ khá thú vị,

Đây là giải pháp của tôi. Đọc các bình luận.

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

bất tiện:

1. Các _updateDatepicker method get được gọi là cũng khi người dùng chọn một ngày hình thành tháng có thể nhìn thấy, hoặc khi bạn thiết lập một ngày qua datepicker('setDate', theDate), mà có thể là một chút không hiệu quả .

2. Nó dựa vào chức năng riêng của Datepicker, nếu trong các phiên bản sau, họ quyết định thay đổi chức năng của nó hoặc thay đổi tên, mã này sẽ bị hỏng. Mặc dù vì bản chất của hàm tôi không thấy điều đó xảy ra sớm.

LƯU Ý: tiếp cận đầu tiên của tôi là để treo cho sự kiện onChangeMonthYear của ui.datepicker, nhưng vì sự kiện này được kích hoạt, trước khi thay thế các ngày trong lịch, phương pháp addTipsys, sẽ thêm lời khuyên của những ngày lịch sắp sửa được xóa. Do đó, cần phải gọi sự kiện addTipsys SAU các yếu tố được làm mới.

EASY HACK: Hook một phương pháp để sự kiện onChangeMonthYear lịch của bạn, và làm một setTimeout để gọi của ngà ngà say. Một số xác nhận sẽ cần phải được thực hiện.