bootstrap datetimepicker: $ не определен

Я получаю ошибку в консоли:

$ is not defined

когда я пытаюсь использовать загрузчик datetimepicker

Это ссылки в моем стиле:

<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="bower_components/bootstrap/bootstrap-datetimepicker-master/build/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" href="css/style.css">

А это ссылки на скрипт:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>

Здесь я использую форму datetimepicker:

<div class="container">
    <div class="row">
        <div class='col-sm-6'>
            <div class="form-group">
                <div class='input-group date' id='datetimepicker2'>
                    <input type='text' class="form-control" />
                    <span class="input-group-addon">
                        <span class="glyphicon glyphicon-calendar"></span>
                    </span>
                </div>
            </div>
        </div>
        <script type="text/javascript">
            $(function () {
                $('#datetimepicker2').datetimepicker({
                    locale: 'ru'
                });
            });
        </script>
    </div>
</div>

Можете ли вы помочь мне разобраться в этом вопросе?


javascript datepicker bootstrapping
person Nuriddin Zuhirxojaev    schedule 16.12.2015    source источник
comment
Видите ли вы какие-либо ошибки 404 или ошибки на вкладке «Консоль»?   -  person Praveen Kumar Purushothaman    schedule 16.12.2015
comment
Так действительно ли загружается библиотека jQuery? Найдите вкладку «Сеть».   -  person epascarello    schedule 16.12.2015
comment
Ссылки на сценарии находятся в голове или теле?   -  person David Hedlund    schedule 16.12.2015
comment
Я не вижу ошибок 404, а ссылки на скрипты есть в теле   -  person Nuriddin Zuhirxojaev    schedule 16.12.2015
comment
@NuriddinZuhirxojaev Где ты загружаешь скрипты, чувак? Это в голове или в конце тела?   -  person Praveen Kumar Purushothaman    schedule 16.12.2015
comment
@PraveenKumar Это в конце тела   -  person Nuriddin Zuhirxojaev    schedule 16.12.2015

Ответы (1)


arrow_upward
1
arrow_downward

Поскольку вы загружаете скрипты в конце тела, лучше переместить ваш тег <script> из body после них или загрузить скрипты в разделе <head> вашего HTML:

<script src="bower_components/jquery/dist/jquery.min.js"></script>
<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="bower_components/moment-develop/moment.js"></script>
<script src="bower_components/bootstrap/js/transition.js"></script>
<script src="bower_components/bootstrap/js/collapse.js"></script>
<script src="bower_components/bootstrap/bootstrap-datetimepicker-master/build/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker2').datetimepicker({
            locale: 'ru'
        });
    });
</script>

Теперь это точно должно сработать. Функции $ и jQuery следует вызывать только после загрузки библиотеки jQuery, это последовательный процесс.

Если у вас также есть общий верхний/нижний колонтитул, безопасно добавить приведенный выше код, так как jQuery проверяет и выполняет только элемент #datetimepicker2, только если он там есть.

person Praveen Kumar Purushothaman    schedule 16.12.2015