bootstrap datetimepicker: $ is not defined

Question

I am gettin an error in console:

$ is not defined

when I am trying to use bootstrap datetimepicker

This is my style links:

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

And this is script links:

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

Here I am using datetimepicker form:

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

Can you help me to sort out this issue?

So is the jQuery library actually being loaded? Look for the Network tab. — epascarello, Dec 16 '15 at 13:16
I do not see any 404 errors and script references are in the body — Nuriddin Zuhirxojaev, Dec 16 '15 at 13:19
@NuriddinZuhirxojaev Where are you loading the scripts man? Is it at the head or end of the body? — Praveen Kumar Purushothaman, Dec 16 '15 at 13:23

score 1 · Accepted Answer · edited May 23 '17 at 12:23

Since you are loading the scripts at the end of the body, it is better to move your <script> tag from inside the body to after these or load the scripts in the <head> section of your 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>

Now this should surely work. The $ and jQuery functions should be called only after loading the jQuery library, it is a sequential process.

If you have a common header / footer also, it is safe to add the above code, as jQuery checks and executes only on the #datetimepicker2 element, only if it is there.

bootstrap datetimepicker: $ is not defined

1 Answers1