Datepicker для bootstrap не работает в модальном окне

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

добавить CSS .datepicker {г-индекс: 1151 важно;}

Answer 2

Я беру несколько часов в час, чтобы положить эту работу, но в конце концов я решил.

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