Search code examples
javascriptjquerytwitter-bootstrapbootstrap-datetimepicker

Jquery function doesn't load - undefined is not a function


I'm trying to install this datetimepicker for bootstrap: https://github.com/Eonasdan/bootstrap-datetimepicker/wiki/Installation

I've got this in the header of my document:

    <script src="/js/jquery-1.11.1.min.js"></script>
    <script src="/js/moment.min.js"></script>

And this in the footer:

    <script src="/js/bootstrap.min.js"></script>
    <script src="/js/bootstrap-datetimepicker.min.js"></script>

And here is the code using the picker:

                <div class="form-group">
                    <div class='input-group date' >
                        <input type='text' name="picker" class="form-control" id='datetimepicker'/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                    </div>
                </div>

            <script type="text/javascript">
                $(function () {
                    $('#datetimepicker').datetimepicker();
                });
            </script>

The problem is that .datetimepicker is an "unresolved function". Why?

Edit:

The IDE (PHPStorm) says that it's unresolved function. And actually running it in Chrome confirms:

    bootstrap-datetimepicker.min.js:1 Uncaught TypeError: undefined is not a function
    myfile.php:42 Uncaught TypeError: undefined is not a function
    bootstrap-datetimepicker.min.js:1 Uncaught Error: Must choose at least one picker

Edit2: I updated the header/footer. Header:

Footer:

<script src="/js/bootstrap.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-rowlink.js"></script>
<script src="/js/myscripts.js"></script>
<script type="text/javascript">
    $(function () {
        $('#datetimepicker').datetimepicker();
    });
</script>

Now IDE recognizes datetimepicker() as a function, but still the same problem in Chrome! (see above)


Solution

  • Try including only jQuery in the header:

    <link rel="stylesheet" type="text/css" media="screen" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" />
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
    

    and these in the footer:

    <script type="text/javascript" src="scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="scripts/moment.js"></script>
    <script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>
    

    The author uses jQuery 2.1.1 so his plugin may be reliant on that version.

    EDIT

    I cannot get it to work, either. However, there are a few Issues created on its Github page since Moment.js has been updated to version 2.8.4. Try Smalot's Bootstrap Datepicker. It's also well maintained and it works for me.