Datepicker將不會在引導模式下打開

Question

我有一個簡單的模式在我的看法與日期選擇器輸入字段。我遵循堆棧溢出中的一些指令，但是我仍然無法工作，我不知道爲什麼。

這裏是腳本的一部分，從我的asp.net mvc的觀點：

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

這裏是模態：

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

任何幫助將不勝感激。

Answer 1

你的問題是關係到庫的順序：

變化的順序：

• jQuery的ui.css
• jQuery的ui.min.js
• jQuery的。 min.js

到：

個
• jquery.min.js
• jQuery的ui.css
• jQuery的ui.min.js

所以結果是：

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