如何实现jQuery UI Datepicker的currentText按钮点击关闭日期选择器

我明白你遇到的问题了——直接绑定body的委托事件没效果，其实是因为jQuery UI的Datepicker对按钮点击有自己的内部处理逻辑，普通的事件绑定很容易被覆盖或者时机不对。下面给你两个靠谱的解决方案：

方案一：重写Datepicker的默认跳转逻辑（推荐） #

这个方法直接修改Datepicker内置的_gotoToday方法，在它默认的「跳转到今天」行为之后，自动关闭弹窗，稳定性最高：

// 重写_gotoToday方法，保留原有功能并添加关闭弹窗的逻辑
$.datepicker._gotoToday = function(id) {
    const target = $(id);
    const inst = this._getInst(target[0]);
    
    // 保留Datepicker默认的「跳转到今天」逻辑
    this._setDate(inst, new Date());
    // 新增：关闭日期选择器弹窗
    this._hideDatepicker();
    // 可选：触发输入框的change事件，确保表单能捕获到日期变化
    target.trigger('change');
};

// 正常初始化你的Datepicker
$("#your-datepicker-input").datepicker({
    currentText: "今天" // 这里替换成你需要的按钮文本
});

方案二：在Datepicker显示时绑定按钮事件 #

如果你不想修改全局方法，可以在Datepicker即将显示时，给current按钮绑定点击事件，确保事件能正确触发：

$("#your-datepicker-input").datepicker({
    currentText: "今天",
    beforeShow: function(input, inst) {
        // 给current按钮绑定点击事件
        $(inst.dpDiv).on('click', '.ui-datepicker-current', function() {
            // 先执行默认的「跳转到今天」操作
            $.datepicker._gotoToday(input);
            // 然后关闭弹窗
            $.datepicker._hideDatepicker();
        });
    }
});

为什么你的原代码没效果？ #

你之前的代码失效主要有两个原因：

• jQuery UI的Datepicker在按钮点击时会执行内部逻辑，可能阻止了事件冒泡，导致body上的委托事件无法触发；
• 即使事件触发了，Datepicker的内部逻辑可能会在你hide()之后重新显示弹窗，导致看起来没效果。

内容的提问来源于stack exchange，提问作者John Bennett Boone Burd