Search code examples
javascriptjquerytwitter-bootstrapbootstrap-datetimepicker

Bootstrap datetimepicker won't work

I'm trying to use the Bootstrap datetimepicker:

I believe followed all the instructions, but I can't get it to work. Firebug does not give me any errors, and I checked all file paths many times. What am I doing wrong?

(I actually found the same question here, unanswered: Can't make datepicker bootstrap to work )

Here's my JSfiddle

And here's my code:

<html>
    <head>
        <title>date test</title>
        <link href="css/bootstrap.min.css" rel="stylesheet"/>
        <link rel="stylesheet" href="bootstrap-datetimepicker.min.css"/>
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class='col-sm-6'>
                    <div class="form-group">
                        <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>
            </div>
        </div>    
            <script type="text/javascript" src="jquery.js"></script>
            <script type="text/javascript" src="moment.js"></script>
            <script type="text/javascript" src="transition.js"></script>
            <script type="text/javascript" src="collapse.js"></script>
            <script type="text/javascript" src="bootstrap.min.js"></script>
            <script type="text/javascript" src="bootstrap-datetimepicker.min.js"></script>
    </body>
</html>
Solution

  • Check my updated Fiddle

    You had 2 issues:

    1- jQuery library was missing
    2- jsfiddle's div Result was overlapping the daterange picker button, so I added margin for testing :

    <div class='input-group date' id='datetimepicker1' style="margin-top: 100px;">