DateTimePicker选中日期无法触发事件，如何传递选中值到其他函数修改变量

问题根因 #

你当前代码无法触发事件的核心原因是事件监听的注册逻辑错位：你将change事件的绑定逻辑放在了.pickerButton的点击回调内部，只有先触发按钮点击才会注册change监听，且每次点击都会重复绑定，不符合组件的事件监听规则。

修复后的实现代码 #

$(document).ready(function() {
    // 提前定义数据源变量，也可挂载到window对象实现全局访问
    var dataSource2 = "../testcanvas/data/Multi_band_01-01-2021.tif";

    $("#dtBox").DateTimePicker({
        // 配置日期格式与路径内格式完全匹配：两位日-两位月-四位年
        dateFormat: "dd-MM-yyyy",
        // 直接使用组件原生的日期变更回调，无需手动绑定事件
        dateTimePickerChange: function(date, dateString) {
            // dateString就是格式化完成的选中日期，例如02-01-2021
            console.log("选中日期：", dateString);
            
            // 正则替换路径中的日期部分
            dataSource2 = dataSource2.replace(/Multi_band_[\d-]+\.tif/, `Multi_band_${dateString}.tif`);
            console.log("更新后数据源路径：", dataSource2);

            // 其他脚本需要访问时可挂载为全局变量：window.dataSource2 = dataSource2
        }
    });
});

额外说明 #

• 如果你需要自定义日期格式，可调整dateFormat配置项：dd对应两位日、MM对应两位月、yyyy对应四位年。
• 如果跨脚本访问更新后的路径，只要把dataSource2挂载到window全局对象上，其他脚本直接读取window.dataSource2即可拿到最新值。

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