本文介绍在 bootstrap + jquery + moment.js 环境下，通过原生 javascript 监听日期变更事件，将第一个日期选择器（datepicker）选中的日期自动同步到第二个日期选择器的完整实现方案。
本文介绍在 bootstrap + jquery + moment.js 环境下，通过原生 javascript 监听日期变更事件，将第一个日期选择器（datepicker）选中的日期自动同步到第二个日期选择器的完整实现方案。
在实际表单开发中，常需实现“日期联动”逻辑——例如用户选择“机构成立日期”后，系统自动将该日期预填至“法院登记日期”字段，既提升用户体验，又减少重复输入错误。虽然您当前使用的是基于 Bootstrap 的自定义日期选择器（含 input-group date 和 inputmask），但其底层仍依赖 <input type="text"> 并通过 JS 初始化为 DatePicker（如 Bootstrap Datepicker 或类似插件）。因此，不能直接监听 change 事件于原生 <input type="date"> 元素（因为您的 HTML 中 type="text"），而应监听 DatePicker 插件提供的专属事件。
✅ 正确做法是：监听 DatePicker 初始化后触发的 changeDate 事件（Bootstrap Datepicker）或 dp.change 事件（Tempus Dominus / newer versions），而非原生 change 或 input。
以下是适配您现有结构的可靠解决方案（兼容 Bootstrap 3/4 + Bootstrap Datepicker v4）：
✅ 推荐代码（无需 setTimeout，稳定可靠）
// 确保 DOM 加载完成且 DatePicker 已初始化
$(document).ready(function() {
// 假设您已用如下方式初始化了两个日期选择器（请确认实际初始化代码）
$('#gnd_institutiondate').datepicker({
format: 'dd-mm-yyyy',
autoclose: true,
todayHighlight: true
});
$('#gnd_courtregisterdate').datepicker({
format: 'dd-mm-yyyy',
autoclose: true
});
// 监听第一个日期选择器的日期选择事件
$('#gnd_institutiondate').on('changeDate', function(e) {
// e.date 是 Moment 对象（若启用 moment），e.date.valueOf() 可转时间戳
const selectedDate = e.format(); // 返回格式化字符串，如 "15-04-2024"
// 同步到第二个日期输入框（注意：设置 input 的 value，再手动触发更新）
$('#gnd_courtregisterdate_val').val(selectedDate);
// 可选：同步更新第二个 DatePicker 的内部视图（避免 UI 不一致）
$('#gnd_courtregisterdate').datepicker('update', e.date);
});
});⚠️ 注意事项与常见问题排查
-
不要用
input或原生change事件：因 Bootstrap Datepicker 不会触发原生change（它操作的是隐藏逻辑），input事件也无法捕获弹窗选择行为。 -
确保初始化顺序：必须先初始化两个 DatePicker，再绑定事件；否则
on('changeDate')无效。 -
ID 唯一性校验：您原始 HTML 中
id="gnd_institutiondate_val"出现两次（<input>重复），请修正为唯一 ID（如仅保留id="gnd_institutiondate_val"在 input 上，id="gnd_institutiondate"在外层 div 上），这是事件绑定的前提。 -
兼容 Moment.js：若您使用的是依赖 Moment 的新版日期插件（如 Tempus Dominus），请改用：
$('#gnd_institutiondate').on('change.dp', function(e) { $('#gnd_courtregisterdate_val').val(moment(e.date).format('DD-MM-YYYY')); }); -
禁用手动编辑（可选）：若希望第二个日期框仅作展示/只读，添加
readonly属性：<input id="gnd_courtregisterdate_val" class="form-control" readonly ...>
✅ 总结
联动核心在于使用 DatePicker 插件提供的语义化事件（如 changeDate）替代原生事件，并配合 datepicker('update') 方法保证 UI 与数据同步。该方案不依赖 Chrome 插件、无定时轮询、性能高效，且完全适配您当前技术栈（jQuery + Bootstrap + Moment.js）。只需检查初始化逻辑、修正 HTML ID 冗余，并将上述脚本置于页面底部或 $(document).ready() 中即可立即生效。
