Datepicker не будет открываться в загрузочном модуле

Question

У меня есть простой модальный вид с полем ввода datepicker. Я выполнил некоторые инструкции из ответов в переполнении стека, но то, что у меня все еще не работает, и я не знаю, почему.

Вот скрипт часть из моего 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>