ブートストラップモードで日付ピッカーが開かない

Question

私は、日付ピッカーの入力フィールドを持つ私のビューでは単純なモーダルを持っています。私はスタックオーバーフローの答えからいくつかの指示に従ったが、私はまだ動作していないと私は理由を知らない。ここで

は私のasp.net MVCのビューからスクリプト部分である：

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

任意の助けが理解されるであろう。

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

そして、ここでは、モーダルです。

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>