如何实现Bootstrap日期选择器选中日期自动同步至第二个选择器？

我有一个包含两个日期选择器字段的表单，字段代码如下：

字段1代码： #

<div class="input-group date" id="gnd_institutiondate">
    <input id="gnd_institutiondate_val" class="form-control" placeholder="DD-MM-YYYY" data-date-format="DD-MM-YYYY" data-inputmask="'mask': '99-99-9999'" required="" name="gnd_institutiondate" type="text">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>
<input id="gnd_institutiondate_val" class="form-control" placeholder="DD-MM-YYYY" data-date-format="DD-MM-YYYY" data-inputmask="'mask': '99-99-9999'" required="" name="gnd_institutiondate" type="text">

字段2代码： #

<div class="input-group date" id="gnd_courtregisterdate">
    <input id="gnd_courtregisterdate_val" class="form-control" placeholder="DD-MM-YYYY" data-date-format="DD-MM-YYYY" data-inputmask="'mask': '99-99-9999'" required="" name="gnd_courtregisterdate" type="text">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-calendar"></span>
    </span>
</div>

需求 #

选中字段1的日期后，自动将该日期填充到字段2的日期选择器中。

现有技术栈 #

项目已引入Moment.js、DataTables、Select2、jQuery，UI框架为Bootstrap。

参考代码（其他字段已生效） #

setTimeout(function() {
    var institutionNoInput = document.getElementById("gnd_institutionno");
    var courtRegisterNoInput = document.getElementById("gnd_courtregisterno");

    institutionNoInput.addEventListener("input", function() {
        courtRegisterNoInput.value = institutionNoInput.value;
    });
}, 1000); // 可根据需要调整超时时间（毫秒）

方案1：原生JS实现（适配参考代码逻辑） #

沿用参考代码的setTimeout等待元素加载逻辑，同时覆盖手动输入和日历选择两种场景：

setTimeout(function() {
    // 获取两个日期输入框元素
    var date1Input = document.getElementById("gnd_institutiondate_val");
    var date2Input = document.getElementById("gnd_courtregisterdate_val");

    // 监听手动输入事件
    date1Input.addEventListener("input", function() {
        date2Input.value = date1Input.value;
        // 触发change事件，确保日期选择器组件同步状态
        date2Input.dispatchEvent(new Event("change"));
    });

    // 监听日历弹窗关闭事件（通过日历选择日期时触发）
    var date1Picker = document.getElementById("gnd_institutiondate");
    date1Picker.addEventListener("hidden.bs.datepicker", function() {
        date2Input.value = date1Input.value;
        date2Input.dispatchEvent(new Event("change"));
    });
}, 1000); // 可根据页面加载速度调整超时时间

方案2：jQuery + Bootstrap Datepicker实现（贴合技术栈） #

利用框架原生事件，稳定性更强：

$(document).ready(function() {
    // 监听字段1的日历选择事件
    $('#gnd_institutiondate').on('changeDate', function(e) {
        // 用Moment.js格式化日期，确保和输入框格式一致
        var selectedDate = moment(e.date).format('DD-MM-YYYY');
        // 设置字段2的值并更新日历组件
        $('#gnd_courtregisterdate_val').val(selectedDate);
        $('#gnd_courtregisterdate').datepicker('update', selectedDate);
    });

    // 监听手动输入事件
    $('#gnd_institutiondate_val').on('input', function() {
        var inputDate = $(this).val();
        // 可选：用Moment.js验证日期格式合法性
        if(moment(inputDate, 'DD-MM-YYYY', true).isValid()) {
            $('#gnd_courtregisterdate_val').val(inputDate);
            $('#gnd_courtregisterdate').datepicker('update', inputDate);
        }
    });
});

Chrome扩展推荐（无需修改代码） #

如果不想改动项目代码，可使用以下扩展实现自动同步：

• AutoFill：支持自定义字段关联规则，选中日期后自动同步值
• Form Filler：可创建填充模板，将指定字段内容同步到目标字段

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