jQuery Datepicker在Fancybox中异常：无法切换年月

我之前也碰到过一模一样的坑！这种情况基本是动态加载的Datepicker事件绑定出问题，或者Fancybox的模态层干扰了Datepicker的交互，下面给你几个亲测有效的解决思路：

1. 必须在Ajax内容加载完成后初始化Datepicker #

因为Ajax加载的内容是动态插入到DOM里的，页面初始加载时这些元素还不存在，直接初始化Datepicker肯定无效。你得借助Fancybox的afterLoad回调，等内容完全加载后再初始化：

$(".fancybox-trigger").fancybox({
    type: 'ajax',
    afterLoad: function() {
        // 替换成你实际的Datepicker选择器
        $('#your-datepicker-id').datepicker({
            changeMonth: true,
            changeYear: true,
            // 其他你的配置项
        });
    }
});

2. 检查z-index，别让Fancybox遮挡Datepicker下拉框 #

有时候看起来点不动年月选择器，其实是Fancybox的模态层z-index太高，把Datepicker的下拉框挡住了。给Datepicker加个更高的z-index就行：

.ui-datepicker {
    z-index: 99999 !important; /* 确保比Fancybox的z-index高，默认Fancybox一般是9999 */
}

3. 让Fancybox别拦截Datepicker的事件 #

Fancybox默认会对模态内的元素做事件拦截，可能会阻止Datepicker的年月切换事件冒泡。你可以给Datepicker元素加上data-fancybox="false"，让Fancybox跳过对它的事件处理：

$(".fancybox-trigger").fancybox({
    type: 'ajax',
    afterLoad: function() {
        $('#your-datepicker-id')
            .datepicker({ changeMonth: true, changeYear: true })
            .attr('data-fancybox', 'false');
    }
});

或者也可以调整Fancybox的overlay配置，不过这个可能会让模态框失去锁定效果，按需选择：

$(".fancybox-trigger").fancybox({
    type: 'ajax',
    helpers: {
        overlay: { locked: false }
    },
    // 加上afterLoad初始化Datepicker
});

为什么iframe模式能正常工作？ #

因为iframe是独立的文档环境，Datepicker的所有事件都在iframe内部运行，不会被主文档的Fancybox事件干扰，所以交互完全正常。但既然你需要用ajax，上面的方法应该能解决问题。

内容的提问来源于stack exchange，提问作者Marco