Question

具有此模式：

<div class="modal fade" id="nuovohotelModal" tabindex="-1" role="dialog" aria-labelledby="favoritesModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
        </button>
        <div class="col-md-12">
          <label>Aggiungi nuovo hotel</label>
          <form action="{{route('addHotelCP',$data[0]->id)}}" enctype="multipart/form-data" method="post">
            <input type="hidden" id="_token" name="_token" value="{{ csrf_token() }}">
            <input type="hidden" id="CPID" name="idCP" value="{{ $data[0]->id }}">
            <input type="hidden" id="clienteid" name="idClienteFk" value="{{ $data[0]->idClienteFk }}">

            <label for="hotel">
              Struttura alberghiera
            </label>
            <select class="form-control" id="HotelidCompagniaFk" name="idHotelFk">
              <option value="0">
                Seleziona una struttura alberghiera
              </option>
              @foreach ($data[4] as $hotelS)

              <option value="{{$hotelS->id}}">
                {{$hotelS->nome}}
              </option>

              @endforeach
            </select>
            <div class="form-group" onclick="addDatepicker()" id="newhoteldatapickerdataIn">
              <label for="dataIn">Data di arrivo:</label>
              <div class="input-group date">

                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                <input type="text" class="form-control" id="newhoteldataIn" name="dataIn" />
              </div>
            </div>

            <div class="form-group" id="newhoteldatapickerdataOut">
              <label for="dataOut">Data di rientro:</label>
              <div class="input-group date">

                <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                <input type="text" class="form-control" id="newhoteldataOut" name="dataOut" />
              </div>
            </div>

            <label for="trattamento">Trattamento:</label>
            <input type="text" class="form-control" id="newHoteltrattamento" name="trattamento" />

            <label for="commissioni">Commissioni:</label>
            <input type="text" class="form-control" id="newHotelcommissioni" name="commissioni" />

            <label for="buy">Buy:</label>
            <input type="text" class="form-control" id="newHotelbuy" name="buy" />
            <label for="sell">Sell:</label>
            <input type="text" class="form-control" id="newHotelsell" name="sell" sell/>
            <label for="bar">BAR:</label>
            <input type="text" class="form-control" id="newHotelbar" name="bar" bar/>

            <label for="istruzioni">Istruzioni:</label>
            <input type="text" class="form-control" id="newHotelistruzioni" name="istruzioni" />

            <label for="status">Stato:</label>
            <select class="form-control" name="status" id="newHotelstatus">
              <option value="0">
                Seleziona uno stato
              </option>
              @foreach($data[12] as $status)

              <option value="{{$status->id}}" >
                {{$status->nome}}
              </option>

              @endforeach
            </select>
            <br />
            <br/>
            <br/>

            <input type="submit" class="btn btn-warning" value="Aggiungi nuovo hotel" />
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

在document.ready中调用了相关的jQuery部分：

$('#newhoteldatapickerdataIn .input-group date').datepicker({
  format: 'dd/mm/yyyy'
});

$('#newhoteldatapickerdataOut .input-group date').datepicker({
  format: 'dd/mm/yyyy'
});

如果我单击两个日期字段，它将不会显示日期选择器的日历。

如问题标题中所述，我还强制执行了z-index：

body.modal-open .datepicker {
  z-index: 99999999 !important;
  width: 80%;
  height: 85%;
}

.datepicker.dropdown-menu {
  z-index: 100000 !important;
}

.datepicker {
  z-index: 100000 !important;
}

并且可以肯定的是，将应用此CSS强制执行：

我还试图强制创建日期选择器，当它在字段本身上被onclick触发时会失败。

Chrome的屏幕截图与页面中正确显示的另一个日期选择器有关，该问题仅影响模式窗口内的日期选择器。

我也试图在打开模式时强制执行两个日期选择器的创建：

$("#nuovohotelModal").on('shown.bs.modal', function(e) {

  $('#newhoteldatapickerdataIn .input-group date').datepicker({
    format: 'dd/mm/yyyy',
    autoclose: true,
    language: "it"
  });

  $('#newhoteldatapickerdataOut .input-group date').datepicker({

    format: 'dd/mm/yyyy',
    autoclose: true,
    language: "it"
  });

});

Bootstrap模态无法显示DatePicker，而且具有巨大的z-index

0 个答案: