Bootstrap 3 DatePicker не работает

Попытка использовать DatePicker здесь: http://bootstrap-datepicker.readthedocs.org/en/latest/Bootstrap 3 DatePicker не работает

Я не то, что опыт работы с JQuery, но я должен быть что-то отсутствует, потому что он никогда не работает. Вот мой HTML, все файлы CSS и JS находятся в соответствующих местах, без проблем с поиском файлов. Я уверен, что мне не хватает чего-то легкого, но я этого не вижу, копируя и вставляя прямо из приведенных примеров. Дайте мне знать, что вы думаете.

<!DOCTYPE html> 
<html> 
    <head> 
    <link href="css/bootstrap.css" rel="stylesheet"> 
    <link href="css/datepicker.css" rel="stylesheet"> 
    </head> 
    <body> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-lg-8"> 
      <form id="main"> 
      <input type="text"> 
      </form> 
      <script> 
      $('#main input').datepicker({ 
      }); 
      </script> 
     </div> 
     </div> 
    </div> 
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> 
    <script src="https://code.jquery.com/jquery.js"></script> 
    <!-- Include all compiled plugins (below), or include individual files as needed --> 
    <script src="js/bootstrap.js"></script> 
    <script src="js/bootstrap-datepicker.js"></script>  
    </body> 
</html>

источник

2014-01-07 watyeag

Любые сообщения в вашей консоли ошибок? – Phil

удалить все после первого для начала. Это все повторяется. –

вы должны обернуть javascript в функции onready. он не работает, потому что вам нужно дождаться, когда javascript завершит загрузку, прежде чем вы сможете ее использовать. или сделать то, что говорит jasen, так что библиотека jquery загружается, прежде чем она попадет в ваш скрипт. –

У вас есть несколько проблем с вашим кодом

You need a document ready handler
Вам необходимо разместить свой сценарий последних после включения библиотек
У вас есть повторяющиеся теги скрипта

Вот что вам нужно, чтобы заставить его работать

<!DOCTYPE html> 
<html> 
<head> 
    <link href="css/bootstrap.css" rel="stylesheet" /> 
    <link href="css/datepicker.css" rel="stylesheet" /> 
</head> 
<body> 

<form id="main"> 
    <input type="text" /> 
</form> 

<script src="https://code.jquery.com/jquery.js"></script> 
<script src="js/bootstrap.js"></script> 
<script src="js/bootstrap-datepicker.js"></script> 
<script> 
    $(document).ready(function() { 
     $("#main input").datepicker(); 
    }); 
</script> 
</body> 
</html>

источник

2014-01-07 23:18:32 Jasen

FYI - ваш код делает ** не ** нужен * документ готов * обработчик. Все элементы DOM, указанные в скрипте, доступны во время выполнения – Phil

@Phil Поскольку '# main' определен выше? Меня интересуют ресурсы, связанные с этим, если вы знаете, где я могу искать. – zessx

Да. Сообщение SO, с которым вы связались в своем ответе, объясняет это достаточно ясно – Phil

Bootstrap 3 DatePicker не работает

ответ

Смежные вопросы