如何在同一input-group中为多个输入框单独使用Bootstrap Datetimepicker

我之前刚好处理过类似的场景，其实核心思路很简单——不要给整个input-group初始化组件，而是针对每个需要的输入框单独绑定Datetimepicker，这样就能实现两个日期框完全独立，第三个输入框不受影响的效果。

步骤1：优化HTML标记（可选但推荐） #

给需要绑定日期选择器的两个输入框添加专属类名，方便后续JS精准定位，避免误操作其他元素：

<div class="form-group row">
  <div class="col-md-12">
    <div class="input-group multi-input-group datetimepicker">
      <span class="input-group-addon"><i class="fas fa-calendar-alt fa-fw"></i></span>
      <input type="text" class="form-control rent-start-date" name="formResidentRentStart">
      <span class="input-group-addon"><i class="fas fa-calendar-alt fa-fw"></i></span>
      <input type="text" class="form-control rent-end-date" name="formResidentRentEnd">
      <span class="input-group-addon"><i class="fas fa-euro-sign fa-fw"></i></span>
      <input type="text" class="form-control text-right" name="formResidentRentRentValue">
    </div>
  </div>
</div>

步骤2：单独初始化每个Datetimepicker实例 #

通过类名选中两个日期输入框，分别调用datetimepicker()方法，配置各自的参数（格式、语言等），这样它们就是完全独立的功能实例：

// 初始化开始日期选择器
$('.rent-start-date').datetimepicker({
  format: 'YYYY-MM-DD', // 根据你的业务需求设置日期格式
  useCurrent: false,    // 不默认填充当前日期（可选配置）
  locale: 'zh-CN'       // 按需设置语言，比如中文环境
});

// 初始化结束日期选择器
$('.rent-end-date').datetimepicker({
  format: 'YYYY-MM-DD',
  useCurrent: false,
  // 如果你需要结束日期不早于开始日期，可以添加联动逻辑（可选，不影响独立性）
  // minDate: $('.rent-start-date').data('DateTimePicker').date()
});

关键注意点 #

• 核心逻辑是单个输入框绑定组件，而非给整个input-group绑定，这样每个日期选择器的事件和状态都是独立的，不会互相干扰。
• 第三个输入框没有被初始化Datetimepicker，所以完全保持原生输入框的功能，不受任何影响。

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