Getting TypeError: $(...).datetimepicker is not a function

Question

I am scratching my head at this issue. I am trying to use bootstrap datetimepicker add-on to have a nice dynamic calendar but Firefox and Chrome are giving me the same error: TypeError: $(...).datetimepicker is not a function. The calendar never appears of course.

<script src="~/Scripts/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="/scripts/moment.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="/scripts/bootstrap-datetimepicker.js">    </script>

<div class="form-group">
    <div class='col-sm-6'>
        <div class='input-group date' id='datetimepicker1'>
            <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() {
        $('#datetimepicker1').datetimepicker();
    });
</script>

What am I doing wrong? The order or something?

EDIT: I am trying to call DateTimePicker as documentation on http://eonasdan.github.io/bootstrap-datetimepicker/ , not DatePicker as in the suggested answer.

Answer 1

Check here it works well https://jsfiddle.net/vvmhbykw/ with your code:

$(function() {
 $('#datetimepicker1').datetimepicker();
});

Try using different script versions or ones that I used in fiddle.