在jquery-ui datapicker的'Today'按鈕上添加事件監聽器

Question

我使用的是datepicker表單jQuery-ui-1.8.16。

我有以下代碼：

Site.Calendar = function() { 

    // Set default setting for all calendars 
    jQuery.datepicker.setDefaults({ 
     showOn : 'both', 
     buttonImageOnly : true, 
     buttonText: '', 
     changeMonth : true, 
     changeYear : true, 
     showOtherMonths : true, 
     selectOtherMonths : true, 
     showButtonPanel : true, 
     dateFormat : "D, d M, yy", 
     showAnim : "slideDown", 
     onSelect: Site.Calendar.customiseTodayButton 
    }); 
}; 

Site.Calendar.customiseTodayButton = function(dateText, inst) { 
    console.log("hello"); 
}; 

我customiseTodayButton功能時，我選擇一個實際日期，而不是在今天按鈕纔剛剛啓動。

有沒有什麼辦法可以重寫今日按鈕在jQuery datepicker中的工作方式？

謝謝

Answer 1

我發現下面張貼在這裏： Today button in jQuery Datepicker doesn't work

jQuery.datepicker._gotoToday = function(id) { 
     var target = jQuery(id); 
     var inst = this._getInst(target[0]); 
     if (this._get(inst, 'gotoCurrent') && inst.currentDay) { 
       inst.selectedDay = inst.currentDay; 
       inst.drawMonth = inst.selectedMonth = inst.currentMonth; 
       inst.drawYear = inst.selectedYear = inst.currentYear; 
     } 
     else { 
       var date = new Date(); 
       inst.selectedDay = date.getDate(); 
       inst.drawMonth = inst.selectedMonth = date.getMonth(); 
       inst.drawYear = inst.selectedYear = date.getFullYear(); 
       this._setDateDatepicker(target, date); 
       this._selectDate(id, this._getDateDatepicker(target)); 
     } 
     this._notifyChange(inst); 
     this._adjustDate(target); 
    } 

它只是重寫goToToday方法，並增加了兩條新線：

this._setDateDatepicker(target, date); 
this._selectDate(id, this._getDateDatepicker(target)); 

也許有與解決這一問題更清潔的方式您原始答案馬克？

Answer 2

點擊today按鈕時沒有標準事件。然而，看看jquery.ui.datepicker.js代碼，它看起來叫做$.datepicker._gotoToday。我將通過customizeTodayButton假設你正試圖改變它現在所做的行爲（不是外觀，外觀將與樣式完成）。要改變現有的行爲，最好知道它現在的作用。因此，考慮到這一點，這是所使用的功能的當前代碼：

/* Action for current link. */ 
_gotoToday: function(id) { 
    var target = $(id); 
    var inst = this._getInst(target[0]); 
    if (this._get(inst, 'gotoCurrent') && inst.currentDay) { 
     inst.selectedDay = inst.currentDay; 
     inst.drawMonth = inst.selectedMonth = inst.currentMonth; 
     inst.drawYear = inst.selectedYear = inst.currentYear; 
    } 
    else { 
     var date = new Date(); 
     inst.selectedDay = date.getDate(); 
     inst.drawMonth = inst.selectedMonth = date.getMonth(); 
     inst.drawYear = inst.selectedYear = date.getFullYear(); 
    } 
    this._notifyChange(inst); 
    this._adjustDate(target); 
}, 

要與自己的功能覆蓋此功能，您需要做的更新程式碼，這樣的事情：

Site.Calendar = function() { 
    //override the existing _goToToday functionality 
    $.datepicker._gotoTodayOriginal = $.datepicker._gotoToday; 
    $.datepicker._gotoToday = function(id) { 
     // now, call the original handler 
     $.datepicker._gotoTodayOriginal.apply(this, [id]); 
     // invoke selectDate to select the current date and close datepicker. 
     $.datepicker._selectDate.apply(this, [id]); 
    }; 

    // Set default setting for all calendars 
    jQuery.datepicker.setDefaults({ 
     showOn: 'both', 
     buttonImageOnly: true, 
     buttonText: '', 
     changeMonth: true, 
     changeYear: true, 
     showOtherMonths: true, 
     selectOtherMonths: true, 
     showButtonPanel: true, 
     dateFormat: "D, d M, yy", 
     showAnim: "slideDown" 
    }); 
}; 

另外，這裏有一個你正在尋找的工作jsFiddle。

Answer 3

我意識到今天按鈕，這樣壓倒一切：

jQuery.datepicker._gotoToday = function(id) { 
    var today = new Date(); 
    var dateRef = jQuery("<td><a>" + today.getDate() + "</a></td>"); 
    this._selectDay(id, today.getMonth(), today.getFullYear(), dateRef); 
}; 

這是很簡單，做了「選擇日期和關閉日期選擇器」功能，我會的。