用於引導的日期選擇器在模式窗口中不起作用

Question

我有引導日期選擇器的問題，我使用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

添加CSS .datepicker {z-index的：1151重要;}

Answer 2

我需要幾1個小時把這個工作，但最後我解決了。

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