Datepicker wird nicht in einem Bootstrap-Modal geöffnet

Question

Ich habe ein einfaches modales in meiner Sicht mit einem Datepicker-Eingabefeld. Ich habe einige Anweisungen aus den Antworten im Stapelüberlauf befolgt, aber was ich noch immer nicht funktioniere und ich weiß nicht warum. Hier

ist das Skript Teil aus meiner asp.net Mvc-Ansicht:

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
<script type="text/javascript"> 

    $('#mdl').on('click', function() { 
     var parent = $(this).closest('.jumbotron'); 
     var name = parent.find('input[name="NAME_OF_MODEL"]').val(); 
     var id = parent.find('input[name="ID_OF_MODEL"]').val(); 
     console.log(id); 
     //var titleLocation = $('#myModal').find('.modal-body'); modal - title 
     var titleLocation = $('#myModal').find('.modal-title'); 
     titleLocation.text(name); 

     // for each information you'll have to do like above... 

     $('#myModal').modal('show'); 

    }); 
}); 

    $(function() { 
     $('.date-picker').datepicker(); 
    }) 


</script> 

Und hier ist der modale:

<div id="myModal" class="modal fade" role="dialog"> 
<div class="modal-dialog"> 
    <!-- Modal content--> 
    <div class="modal-content"> 
     <div class="modal-header"> 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
      <h4 class="modal-title"></h4> 
     </div> 
     <div class="modal-body"> 
      <p>Some text in the modal.</p> 
      <input class='date-picker' /> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" data-dismiss="modal">Save</button> 
     </div> 
    </div> 
</div> 

Jede Hilfe geschätzt wird.

Answer 1

Ihr Problem wird in der Reihenfolge der Bibliotheken bezogen werden:

Änderung der Bestellung aus:

• jquery-ui.css
• jquery-ui.min.js
• jquery. min.js

zu:

• jquery.min.js
• jquery-ui.css
• jquery-ui.min.js

So ist das Ergebnis:

$(function() { 
 

 
    $('#mdl').on('click', function() { 
 
    var parent = $(this).closest('.jumbotron'); 
 
    var name = parent.find('input[name="NAME_OF_MODEL"]').val(); 
 
    var id = parent.find('input[name="ID_OF_MODEL"]').val(); 
 
    console.log(id); 
 
    //var titleLocation = $('#myModal').find('.modal-body'); modal - title 
 
    var titleLocation = $('#myModal').find('.modal-title'); 
 
    titleLocation.text(name); 
 

 
    // for each information you'll have to do like above... 
 

 
    $('#myModal').modal('show'); 
 

 
    }); 
 
    $('.date-picker').datepicker(); 
 

 
});

<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> 
 

 

 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<button class="btn" id="mdl">Click Me</button> 
 
<div id="myModal" class="modal fade" role="dialog"> 
 
    <div class="modal-dialog"> 
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
       <h4 class="modal-title"></h4> 
 
      </div> 
 
      <div class="modal-body"> 
 
       <p>Some text in the modal.</p> 
 
       <input class='date-picker'/> 
 
      </div> 
 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-default" data-dismiss="modal">Save</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</div>