Проблемы с JQuery DatePicker и BootstrapModal на JQuery> = 2

Question

Я пытаюсь установить datepicker на вход внутри бутстрапа modal.The datepicker он хорошо работает внутри шаблона, за исключением модалов (с использованием JQuery 2+) Однако, если я Например, используя JQuery 1.9, датпикер работает хорошо везде.

Я попытался this example

$('#idTourDateDetails').datepicker({ 
 
    dateFormat: 'dd-mm-yy', 
 
    minDate: '+5d', 
 
    changeMonth: true, 
 
    changeYear: true, 
 
    altField: "#idTourDateDetailsHidden", 
 
    altFormat: "yy-mm-dd" 
 
});

.clsDatePicker { 
 
    z-index: 100000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<!-- Button trigger modal --> 
 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button> 
 
<!-- Modal --> 
 
<div class="modal fade" id="myModal" 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" aria-hidden="true">&times;</button> 
 
       <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
 

 
      </div> 
 
      <div class="modal-body"> 
 
       <div class="col-md-12"> 
 
        <div class="row"> 
 
         <label for="idTourDateDetails">Tour Start Date:</label> 
 
         <div class="form-group"> 
 
          <div class="input-group"> 
 
           <input type="text" name="idTourDateDetails" id="idTourDateDetails" readonly="readonly" class="form-control clsDatePicker"> <span class="input-group-addon"><i id="calIconTourDateDetails" class="glyphicon glyphicon-th"></i></span> 
 

 
          </div> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
      <!-- /.modal-content --> 
 
     </div> 
 
     <!-- /.modal-dialog --> 
 
    </div> 
 
    <!-- /.modal -->

Здесь также при переключении на JQuery 2.0.2, что не работает больше.

Мне нужна помощь таким образом, и я не хочу использовать предыдущие версии JQuery.

Спасибо,

Answer 1

Похоже, вам необходимо включить JQuery UI в вашей скрипке, а затем он работает отлично: updated fiddle, using jQuery 2.1.0, and jQuery-ui.js

https://code.jquery.com/ui/1.11.3/jquery-ui.js 

(По существу, я думаю, что вы просто не хватает необходимого jquery- ui.js ссылка)

Answer 2

Наконец я нашел:

$('.datepicker2').datepicker({ 
    beforeShow: function() { 
     $('.ui-datepicker').css('z-index', 9999);     
    } 
}); 

Это было так просто ... На самом деле элемент существовал внутри, поэтому он срабатывал хорошо, но индекс z был как-то слишком низким.