在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); 
}; 

这是很简单，做了“选择日期和关闭日期选择器”功能，我会的。