Datepicker for bootstrap does not work in modal window

Question

I have issue with bootstrap datepicker, I use this plugin, because Disabling dates in the past and dependent disabling.

Whether the problem could be because I use twice on the same page form with the same classes for datepicker? Do you have an idea why this is happening?

In this (first) situation, when I used this code (work perfect)

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

but in this case when I used same form in modal windows (does not work at all, because when I click on arrival or departure input, should be opened date popup, but does not)

<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

I take a few a hour to put this to work but finally I solved.

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

Answer 2

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