在 jquery-ui datepicker 中的“今天”按钮上添加事件侦听器

Posted 2023-05-07

【中文标题】在 jquery-ui datepicker 中的“今天”按钮上添加事件侦听器

【英文标题】：Adding event listener on 'Today' button in jquery-ui datapicker

【发布时间】：2012-02-03 10:15:22

【问题描述】：

我正在使用日期选择器表单 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 日期选择器中今天按钮的工作方式吗？

谢谢

【参考方案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));

也许有一种更简洁的方法可以用你原来的答案马克解决这个问题？

【参考方案2】：

点击今天按钮时没有标准事件。但是，查看 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。

【讨论】：

谢谢马克。我想让“今天”按钮的行为类似于日期按钮，即选择“今天”按钮将输入字段更新为今天的日期并关闭日历。根据您的回复，我应该能够弄清楚:)

所以这段代码不能正常工作，我忘记了 datepicker 实际上并没有像其他 ui 组件那样使用 ui 小部件类。立即更新答案，并准确添加您要查找的内容。

嗨，马克。不幸的是，它在 IE 中不起作用 :( 选择“今天”按钮时，日历似乎正在关闭并很快重新打开。有什么想法吗？

我找到了一个适用于所有主要浏览器（IE、Chrome、Firefox）的解决方案...请参阅我在此线程中的新帖子

【参考方案3】：

我以这种方式实现了today按钮的覆盖：

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

这很简单，并且可以实现我想要的“选择日期并关闭日期选择器”功能。

【讨论】：

我想你想说 today.getDay() inside td