Fullcalendar整合Datepicker：如何将日期传入gotoDate实现跳转？

问题根源 #

你的代码存在三个核心问题：

• 作用域隔离：get_datepicker函数被包裹在jQuery的初始化闭包中，外部的原生JS事件监听器无法访问该函数，调用时会触发get_datepicker is not defined错误。
• 变量未赋值：即便能调用get_datepicker，你也没有将返回的日期值赋值给date变量，直接调用calendar.gotoDate(date)会因date未定义报错。
• 事件逻辑混用：在已有jQuery的环境下，混用原生JS事件监听和jQuery Datepicker，容易出现上下文和作用域冲突。

解决方案（推荐统一在jQuery闭包内处理） #

把FullCalendar初始化、Datepicker配置和事件监听都放在同一个jQuery闭包中，确保所有变量和函数的作用域一致：

jQuery(function($) {
    // 初始化jQuery Datepicker
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
    });

    // 初始化FullCalendar（替换成你的日历容器ID和配置）
    const calendar = new FullCalendar.Calendar(document.getElementById('your-calendar-container'), {
        initialView: 'dayGridMonth',
        // 其他日历配置项...
    });

    // 渲染日历
    calendar.render();

    // 绑定Datepicker的日期变更事件
    $('#datepicker').on('change', function() {
        // 获取选中的标准Date对象
        const selectedDate = $(this).datepicker('getDate');
        // 跳转到指定日期（添加空值判断避免错误）
        if (selectedDate) {
            calendar.gotoDate(selectedDate);
        }
    });
});

特殊场景适配：如果calendar变量在外部定义 #

如果你的FullCalendar是在其他作用域初始化的，确保calendar变量能被jQuery闭包访问到（比如定义为全局变量，或通过模块导出传递），再调整事件监听逻辑：

// 假设calendar是全局变量或已在当前作用域内可访问
jQuery(function($) {
    $('#datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
    });

    $('#datepicker').on('change', function() {
        const selectedDate = $(this).datepicker('getDate');
        if (selectedDate && calendar) {
            calendar.gotoDate(selectedDate);
        }
    });
});

关键注意事项 #

• 作用域一致性：尽量避免在jQuery闭包内外混用函数和变量，确保需要访问的资源在同一个作用域内。
• 日期格式兼容：FullCalendar的gotoDate方法支持直接接收标准Date对象，而jQuery Datepicker的getDate()返回的正好是该类型，无需额外转换格式。
• 空值判断：添加selectedDate的有效性校验，避免用户清空日期时触发错误调用。

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