Question

我遇到了bootstrap datepicker的问题，我使用this插件，因为过去禁用日期并依赖禁用。

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

在这个（第一个）情况下，我使用这个代码（完美的工作）

<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;}

引导程序的Datepicker在模态窗口

2 个答案: