阻止引导程序日期时间选取器在选择时间上下按钮时关闭

现在我的问题是日期时间选择器不应该接近时间选择器上下按钮。

要做到这一点，你需要处理这些按钮，这样它们就可以从dp.change事件中被忽略：

$(function () {
  $('#startDate').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    collapse:false,
    sideBySide:true,
    useCurrent:false,
    showClose:true
  });
  $('#endDate').datetimepicker({
    format: 'YYYY-MM-DD HH:mm:ss',
    collapse:false,
    sideBySide:true,
    useCurrent:false,
    showClose:true
  });
  $("#startDate, #endDate").on("dp.show", function (e) {
    $('table.table-condensed a.btn').on('click', function(e) {
      e.stopImmediatePropagation();
      var selector = 'seconds';
      var op = '+';
      switch ($(this).attr('data-action')) {
        case "incrementSeconds":
          break;
        case "incrementMinutes":
          selector = 'minutes';
          break;
        case "incrementHours":
          selector = 'hours';
          break;
        case "decrementHours":
          op = '-';
          selector = 'hours';
          break;
        case "decrementMinutes":
          op = '-';
          selector = 'minutes';
          break;
        case "decrementSeconds":
          op = '-';
          selector = 'seconds';
          break;
      }
      var cachedEle = $(this).closest('table.table-condensed').find('span[data-time-component="' + selector + '"]');
      var resultValue = ((op == '+') ? +cachedEle.text() + 1 : (+cachedEle.text() == 0) ? 59 : +cachedEle.text() - 1) % 60;
      cachedEle.text( (resultValue < 10) ? '0' + resultValue : resultValue );
      var originalTargetId = $(this).closest('#startDate, #endDate').attr('id');
      var seconds = $(this).closest('table.table-condensed').find('span[data-time-component="seconds"]').text();
      var minutes = $(this).closest('table.table-condensed').find('span[data-time-component="minutes"]').text();
      var hours = $(this).closest('table.table-condensed').find('span[data-time-component="hours"]').text();
      $('#' + originalTargetId).attr('changedHHMMSS', hours + ':' + minutes + ':' + seconds);
      $('#' + originalTargetId).trigger("dp.change", {'originalTargetId': originalTargetId, 'hours': hours, 'minutes': minutes, 'seconds': seconds})
    });
  });
  $("#startDate, #endDate").on("dp.hide", function (e) {
    $('table.table-condensed a.btn').off('click');
  });
  $("#startDate, #endDate").on("dp.change", function (e, originalTargetId) {
    if (originalTargetId === undefined) {
      var changedHHMMSS = $(this).attr('changedHHMMSS');
      $(this).removeAttr('changedHHMMSS');
      if (changedHHMMSS !== undefined) {
        var inputVal = $(this).children('input').val();
        $(this).children('input').val(inputVal.substring(0, inputVal.length - changedHHMMSS.length) + changedHHMMSS);
      }
      $(this).data("DateTimePicker").hide();
    } else {
      if (originalTargetId instanceof Object && 'originalTargetId' in originalTargetId) {
        console.log('Discard events coming from hh:mm:ss: ' + originalTargetId.originalTargetId);
      }
    }
  });
});

<link rel="stylesheet" href="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/build/css/bootstrap-datetimepicker.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-transition.js"></script>
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap-collapse.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/d004434a5ff76e7b97c8b07c01f34ca69e635d97/src/js/bootstrap-datetimepicker.js"></script>
<div class="col-md-4 col-xs-12 center-block">
    <div class="col-md-12 col-sm-12 reportCriteriaHead">
        <div class="reportCriteriaTitle col-md-8 col-md-offset-2 col-sm-12"> Date ( YYYY-MM-DD )</div>
    </div>
    <!-- <div class="col-md-12 col-xs-12 col-sm-12 no-padding">
           <label>Start Date</label>
       </div>
 -->
    <div class="col-md-12 col-xs-12 col-sm-12">
        <label class="col-md-2 col-xs-12 text-center noPadding linehgt"><b>From:</b></label>
        <div class='input-group date col-md-10 col-md-offset-1 col-xs-12 selectSumary ' id='startDate'>
            <input type='text' class="form-control " placeholder="Start Date" id="startDateInput"/>
               							<span class="input-group-addon">
                   							<span class="glyphicon glyphicon-calendar"></span>
               							</span>
        </div>
    </div>
    <!-- <div class="col-md-12 col-xs-12 col-sm-12 no-padding">
            <label>End Date</label>
        </div> -->
    <div class="col-md-12 col-xs-12 col-sm-12">
        <label class="col-md-2 col-xs-12 text-center noPadding linehgt"><b>To:</b></label>
        <div class="input-group date col-md-10 col-md-offset-1 col-xs-12 selectSumary " id='endDate'	>
            <input type='text' class="form-control" placeholder="End Date" id="endDateInput" />
              							<span class="input-group-addon">
                  							<span class="glyphicon glyphicon-calendar"></span>
              							</span>
        </div>
    </div>
</div>