title: Eonasdan Bootstrap Datetimepicker not working properly when I click on the calendar icon or input box
body: <p>I'm having a problem with the Eonasdan Bootstrap datetimepicker. I copied and pasted the code from his website (minus the row and container because it made the layout of my panel messy). I suspect that the calendar is buried and not visible for some reason. I was hoping you guys could give me a hand!</p>
  
  <pre><code>&lt;div class="col-sm-6"&gt;
                              &lt;div class="form-group"&gt;
              &lt;div class="input-group date" id="datetimepicker1"&gt;
                  &lt;input type="text" class="form-control active" /&gt;
                  &lt;span class="input-group-addon btn"&gt;
                      &lt;span class="glyphicon glyphicon-calendar"&gt;&lt;/span&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
          &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
                      &lt;script type="text/javascript"&gt;
                      $('#datepicker').off('focus').datepicker().click(
                      function () {
                      $(this).datepicker('show');
                              }
                                  );
              &lt;/script&gt;
  </code></pre>
  
  <p>and here are my reference files so that you can see that I'm loading them properly.</p>
  
  <pre><code>&lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
      &lt;link href="css/styles.css" rel="stylesheet"&gt;
      &lt;link href="css/main.css" rel="stylesheet"&gt;
      &lt;link href="js/bootstrap.min.js"&gt;
      &lt;link href="css/bootstrap-datetimepicker.min.css" rel="stylesheet"&gt;
      &lt;link href="js/bootstrap-datetimepicker.min.js"&gt;
      &lt;link href="js/moment.min.js"&gt;
  &lt;script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I hope you can give me a hand! Thanks.</p>