Bootstrap datetimepicker - will not display the calendar or format the date

I am trying to use the bootstrap datetime picker. The input box with the glyphicon is displayed; however, no calendar appears when I click in the input and manually entering the date does not result in it being formatted. I have copied this from sample code and spent a lot of time ensuring I have the libraries required.

This is displayed:

The HTML and js is:

<!DOCTYPE html>
<html>
<head>
    <title>Cub Award Overview</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="description" content="A Scout award tracking application">
    <meta name="author" content="Glyndwr (Wirrin) Bartlett">
    <script src="resources/jquery/jquery.js"></script>
    <script src="resources/jquery/jquery.min.js"></script>
    <script src="resources/jquery/jquery.validate.js"></script>
    <script src="resources/jquery/jquery.validate.min.js"></script>
    <script src="resources/jquery/additional-methods.js"></script>
    <script src="resources/jquery/additional-methods.min.js"></script>
    <script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>
    <script src="resources/jquery/moment-with-locales.js"></script>



    <!-- Le styles -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet"/>

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="../assets/js/html5shiv.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="resources/favicon.png">
  </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>

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-transition.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-alert.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-modal.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-dropdown.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-scrollspy.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tab.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-button.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-collapse.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-carousel.js"></script>
    <script src="resources/bootstrap-3.3.7-dist/js/bootstrap-typeahead.js"></script>
    <script src="js/groupSummary-ajax.js"></script>

  </body>

I know it is frowned upon to have the script with the HTML and will separate when working.

Upvotes: 1

Answers (2)

Bivin Damodhar

Reputation: 69

Checked your code and it seems like you have not included the moment.js file first before jquery library and bootstrap js file. Also you have not included the moment.js file in your code. Please try as mentioned below

Ex :

<link rel="stylesheet" 

href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js"></script>   
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>

Another thing I noticed is, you didn't provided an id to the input field. Try to provide an id to input field and use in jquery

Ex :

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

Now in script

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

Its worked for me and hope it works for you.

Upvotes: 0

MarvHock

Reputation: 874

Try to swap the order of loading datetimepicker and moment.js, so that moment.js is loaded first

<script src="resources/jquery/moment-with-locales.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/js/bootstrap-datetimepicker.min.js"></script>

Edit

As your code examples has some local resources which we can not check, here is a simple working example with external resources only:

<!DOCTYPE html>
<html>
<head>
    <title>Cub Award Overview</title>
    <meta http-equiv=Content-Type content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A Scout award tracking application">
    <meta name="author" content="Glyndwr (Wirrin) Bartlett">
    <script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.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>
  </body>
</html>

You maybe want to try to adapt that. If it doesn't work inside your code, try to check for errors on the console. Another try would be to implement my code, comment out all of your initial includes and un-comment them step by step to find the source of evil.

Upvotes: 1

Bootstrap datetimepicker - will not display the calendar or format the date

Answers (2)

Related Questions