兄弟，你的问题一眼就能看出来——两个日期选择器的id完全相同（都是datetimepicker1）！这直接导致了第二个组件无法正常工作，原因和解决方法如下：

问题根源 #

• HTML规范明确要求：同一个页面内的id属性必须是全局唯一的，它是元素的专属标识
• 当你用$('#datetimepicker1')调用初始化方法时，jQuery只会匹配到页面中第一个带有该id的元素，第二个日期选择器完全没被插件绑定任何交互逻辑
• 没被初始化的组件，其输入框会保持插件默认的禁用状态（或者说没有激活输入/选择的交互），所以你既没法选日期也没法输入内容

解决方案 #

有两种优雅的解决方式，选哪种都可以：

方式1：给每个组件设置唯一id，分别初始化 #

把第二个日期选择器的id改成datetimepicker2，然后分别调用初始化方法：

$(function() {
  // 初始化第一个组件
  $('#datetimepicker1').datetimepicker({
    format: 'YYYY-MM-DDTHH:MM:SS',
  });
  // 初始化第二个组件
  $('#datetimepicker2').datetimepicker({
    format: 'YYYY-MM-DDTHH:MM:SS',
  });
});

对应的HTML修改第二个id：

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <!-- 这里改成唯一的id -->
        <div class='input-group date' id='datetimepicker2'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

方式2：用类选择器批量初始化（更推荐） #

如果以后还要加更多日期选择器，用类来统一初始化更高效，不用重复写代码：

首先给所有日期选择器的容器加一个统一的类，比如datetimepicker-container：

<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date datetimepicker-container' id='datetimepicker1'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class='col-sm-6'>
      <div class="form-group">
        <div class='input-group date datetimepicker-container' id='datetimepicker2'>
          <input type='text' class="form-control" />
          <span class="input-group-addon">
            <span class="glyphicon glyphicon-calendar"></span>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

然后JS里用类选择器一次性初始化所有组件：

$(function() {
  $('.datetimepicker-container').datetimepicker({
    format: 'YYYY-MM-DDTHH:MM:SS',
  });
});

这样不管你加多少个日期选择器，只要加上这个类，就能自动被初始化，再也不会出现id冲突的问题啦！

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