引导程序的日期选择器在模式窗口中不起作用

Question

我有引导日期选择器的问题，我使用this 插件，因为禁用过去的日期和依赖禁用。

问题是否可能是因为我在同一个页面表单上使用了两次相同的日期选择器类？你知道为什么会这样吗？

在这种（第一种）情况下，当我使用这段代码时（工作完美）

<ul class="nav navbar-nav navbar-right">
  <li class="book dropdown">
    <div class="booking btn-default dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" title="Book now">Book now</div>
    <div class="dropdown-menu" role="menu">
      <form id="check_available" method="post" action="#" role="form" autocomplete="off">
        <div class="form-group arrival">
          <input type="text" class="form-control date-selector" id="arrival" readonly="readonly" name="arrival" placeholder="ARRIVAL" required>
        </div>
        <div class="form-group departure">
          <input type="text" class="form-control date-selector" id="departure" readonly="readonly" name="departure" placeholder="DEPARTURE" required>
        </div>
        <div class="form-group guests">
          <div class="qty-buttons">
            <input type="button" value="+" class="qtyplus" name="quantity">
            <input type="number" name="quantity" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" id="quantity" value class="qty form-control required" placeholder="0" required>
            <input type="button" value="-" class="qtyminus" name="quantity">
          </div>
        </div>
        <button type="submit" class="btn-check" id="submit-check" title="Send">Send</button>
      </form>
    </div>
  </li>
</ul>
<!-- /.navbar-right-->

但是在这种情况下，当我在模态窗口中使用相同的表单时（根本不起作用，因为当我点击到达或离开输入时，应该打开日期弹出窗口，但没有）

<div class="modal modal-fullscreen fade" id="book-modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">
          <span aria-hidden="true" title="Close">&times;</span>
          <span class="sr-only">Close</span>
        </button>
        <h4 class="modal-title" id="myModalLabel">Book now</h4>
      </div>
      <div class="modal-body">
        <div class="row">
          <div class="col-xs-12 col-sm-12 col-md-12">
            <form id="check_available" method="post" action="#" role="form" autocomplete="off">
              <div class="form-group arrival">
                <input type="text" class="form-control date-selector" id="arrival" readonly="readonly" name="arrival" placeholder="ARRIVAL" required>
              </div>
              <div class="form-group departure">
                <input type="text" class="form-control date-selector" id="departure" readonly="readonly" name="departure" placeholder="DEPARTURE" required>
              </div>
              <div class="form-group guests">
                <div class="qty-buttons">
                  <input type="button" value="+" class="qtyplus" name="quantity">
                  <input type="number" name="quantity" oninput="this.value = this.value.replace(/[^0-9.]/g, ''); this.value = this.value.replace(/(\..*)\./g, '$1');" id="quantity" value class="qty form-control required" placeholder="0" required>
                  <input type="button" value="-" class="qtyminus" name="quantity">
                </div>
              </div>
              <button type="submit" class="btn-check" id="submit-check" title="Send">Send</button>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

//Datepicker
if (jQuery('#arrival').length) {
  var nowTemp = new Date();
  var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);

  var checkin = $('#arrival').datepicker({
    onRender: function(date) {
      return date.valueOf() < now.valueOf() ? 'disabled' : '';
    }
  }).on('changeDate', function(ev) {
    if (ev.date.valueOf() > checkout.date.valueOf()) {
      var newDate = new Date(ev.date)
      newDate.setDate(newDate.getDate() + 1);
      checkout.setValue(newDate);
    }
    checkin.hide();
    $('#departure')[0].focus();
  }).data('datepicker');
  var checkout = $('#departure').datepicker({
    onRender: function(date) {
      return date.valueOf() <= checkin.date.valueOf() ? 'disabled' : '';
    }
  }).on('changeDate', function(ev) {
    checkout.hide();
  }).data('datepicker');
}

Answer 1

我花了几个小时来解决这个问题，但最后我解决了。

.bootstrap-datetimepicker-widget {
  z-index:10800 !important;
  display: block;
}

Answer 2

添加 css .datepicker {z-index: 1151 !important;}