jQuery UI datepicker是否存在.on('hidden')事件？如何监听其隐藏完成状态？

安全阿岳

2026-9-25

解决方案

jQuery UI Datepicker 内置了对应的原生事件支持你的需求，无需覆写内置方法，也不需要依赖性能较差的DOM变更监听、定时器方案。
你需要用到两个初始化配置项：

beforeShow：日历面板显示前触发，对应隐藏红方块的逻辑
onClose：日历面板完全关闭（隐藏动画执行结束后）触发，对应重新显示红方块的逻辑，就是你要的类似Bootstrap bs.hidden的效果。

修改后的代码

你只需要调整datepicker的初始化配置，删除原有的DOMSubtreeModified监听逻辑即可：

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    minDate: dateToday,
    // 日历显示前隐藏红方块
    beforeShow: function() {
        $("#redSquare").addClass("none");
    },
    // 日历完全关闭后显示红方块
    onClose: function() {
        $("#redSquare").removeClass("none");
    }
});