Bootstrap datetimepicker输入框尺寸变化且无法重选，疑似与datatable.min.js冲突

解决方案 #

1. 解决输入框尺寸动态变化问题 #

你代码里的日期输入框设置了size="16"属性，bootstrap的form-control默认是100%宽度，datetimepicker赋值或datatable重绘时会动态修改输入框尺寸属性，导致宽度变动，可通过固定样式强制宽度：

.bs-datetime .form-control {
    width: 100% !important;
    box-sizing: border-box;
    min-width: 180px;
}

同时删除输入框上的size="16"属性即可。

2. 解决选完后无法二次触发datetimepicker的问题 #

该问题确实大概率是datatable和datetimepicker的命名/事件绑定冲突导致，按以下步骤处理即可：

步骤1：解决命名冲突

调整JS引入顺序，先引入datetimepicker.js，再执行别名缓存，最后引入datatable.min.js，避免两个库的同名挂载方法被覆盖：

// 加载完datetimepicker.js后立刻执行
$.fn.bsDatetimepicker = $.fn.datetimepicker.noConflict();
// 之后再加载datatable.min.js

步骤2：调整组件初始化时机

如果日期组件放在模态框内，需要在模态框完全渲染完成后再初始化，避免元素未加载导致绑定失效：

$('#modal_form').on('shown.bs.modal', function() {
  $(this).find('.bs-datetime').bsDatetimepicker({
    // 你的原有配置项
    format: 'yyyy-mm-dd hh:ii',
    container: '#modal_form' // 日历挂载到模态框内，避免事件冒泡冲突
  });
});

如果日期组件是放在datatable的行内，需要在datatable每次重绘后重新绑定组件：

$('#你的表格ID').DataTable({
  // 原有表格配置
  drawCallback: function() {
    $('.bs-datetime').bsDatetimepicker({
      // 原有配置项
    });
  }
});

补充优化 #

你代码里的日期容器重复写了两次form_datetime类，可删除冗余的重复类，避免样式冲突。

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