eonasdan-bootstrap-datetimepicker文本框Change事件未触发及重复控件问题

一、处理重复日期选择器问题 #

• 问题根源：页面中带有input-group date类的容器可能已被全局脚本自动初始化了datetimepicker实例，手动再次调用初始化方法会导致重复渲染。
• 解决方案：
  1. 优先检查项目全局JS文件，若存在$('.input-group.date').datetimepicker()这类全局初始化代码，直接删除手动初始化逻辑，复用已有的实例。
  2. 若必须手动初始化，先销毁已有实例再重新创建：

     $('.input-group.date').datetimepicker('destroy').datetimepicker({
         format: 'YYYY-MM-DD' // 按需配置日期格式
     });
     

二、捕获日期变更事件并自动填充第二个文本框 #

eonasdan-bootstrap-datetimepicker不触发原生change事件，需使用组件提供的dp.change自定义事件监听日期变更。同时判断第二个文本框是否为空，为空则同步第一个框的选中值。

修改你的Scripts代码如下：

$(document).ready(function () {
    // 监听第一个日期选择器的变更事件
    $('#txtFirstDate').closest('.input-group.date').on('dp.change', function(e) {
        // 获取格式化后的日期值（格式按需调整）
        const selectedDate = e.date ? e.date.format('YYYY-MM-DD') : '';
        // 检查第二个文本框是否为空
        if (!$('#txtSecondDate').val().trim()) {
            // 同步设置第二个日期选择器的值（确保组件状态一致）
            $('#txtSecondDate').closest('.input-group.date').data('DateTimePicker').date(selectedDate);
        }
    });
});

核心要点： #

• 事件需绑定在datetimepicker的容器（input-group.date）上，而非直接绑定input元素。
• 使用组件的date()方法设置值，而非直接修改input的value，避免组件内部状态与显示值不一致。
• 日期格式可根据业务需求调整，比如'YYYY-MM-DD HH:mm:ss'支持时分秒。

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