Calendar Not Showing Up in Bootstrap Datetimepicker

Calendar not showing up in Bootstrap datetimepicker

The cause of your issue is, you did not place the reference scripts in correct order.

See the documentation: http://eonasdan.github.io/bootstrap-datetimepicker/Installing/

$('#datetimepicker1').datetimepicker();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/src/js/bootstrap-datetimepicker.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/a549aa8780dbda16f6cff545aeabc3d71073911e/build/css/bootstrap-datetimepicker.css" rel="stylesheet"/>
<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>            </div></div>

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

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>

datetimepicker calendar not showing

use all links properly from your reference jquery link should be first then you have to use other links in your html head

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script>
<script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

$(function () {        $('#datetimepicker6').datetimepicker();        $('#datetimepicker7').datetimepicker({            useCurrent: false //Important! See issue #1075        });        $("#datetimepicker6").on("dp.change", function (e) {            $('#datetimepicker7').data("DateTimePicker").minDate(e.date);        });        $("#datetimepicker7").on("dp.change", function (e) {            $('#datetimepicker6').data("DateTimePicker").maxDate(e.date);        });    });

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/><script src="https://code.jquery.com/jquery-2.1.1.min.js"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment-with-locales.js"></script><script src="https://cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/e8bddc60e73c1ec2475f827be36e1957af72e2ea/src/js/bootstrap-datetimepicker.js"></script>

<div class="container">    <div class='col-md-5'>        <div class="form-group">            <div class='input-group date' id='datetimepicker6'>                <input type='text' onkeydown="return false" class="form-control" />                <span class="input-group-addon">                    <span class="glyphicon glyphicon-calendar"></span>                </span>            </div>        </div>    </div>    <div class='col-md-5'>        <div class="form-group">            <div class='input-group date' id='datetimepicker7'>                <input type='text' onkeydown="return false" class="form-control" />                <span class="input-group-addon">                    <span class="glyphicon glyphicon-calendar"></span>                </span>            </div>        </div>    </div></div>

Bootstrap Datepicker not showing up

You should put the date picker script after generating the HTML, so try this final version:

$(document).ready(function() {    var content = document.getElementById('content');    content.innerHTML="";    for(var count = 1; count < 5; count++) {      var div = document.createElement('div');      div.innerHTML = `        <div class="col-md-3" class="title">Car ${count} : </div>        <div class="col-md-3">         <input class="datepicker text centered valid" type="text" value="" name="date" required />   </div>`;      content.appendChild(div);    }    $('.datepicker').datepicker({    format: 'mm-dd-yyyy'  });});

<link href="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/css/bootstrap-datepicker3.min.css" rel="stylesheet"/><link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script><script src="https://unpkg.com/bootstrap-datepicker@1.9.0/dist/js/bootstrap-datepicker.min.js"></script>
<div class="row">  <div class="col-md-12">    <div id="content"></div>  </div></div>

Bootstrap datetimepicker calendar is not visible

You need to remove overflow:hidden; from parent containers also.

Add this css:

.pq-grid, .pq-grid-center, div.pq-grid-cont, .pq-grid-cont-inner {
    overflow: visible!important;
}

Demo: http://jsfiddle.net/rtzxsa3e/2/

I am not supporting the use of !important here. You know your html code well. If you can assign more specific selector which can override the default css of grid plugin, then that will also work.

Calendar Not Showing Up in Bootstrap Datetimepicker