BaddieProgrammer BaddieProgrammer - 1 year ago 281
Javascript Question

Bootstrap 3 Datepicker doesn't show calendar

I've included the following in my page:

In the


<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="">
<!-- Optional theme -->
<!--<link rel="stylesheet" href="">-->

<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<!-- Latest compiled and minified jQuery Core -->
<script src=""></script>

Bottom of

<!-- Moments.js minified CDN -->
<script src=""></script>

<!-- Bootstrap datepicker -->
<script src=""></script>

Then I used jQuery to turn my form's input field into the datepicker:

<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>
<script type="text/javascript">
$(function () {

The input field got styled like a date picker(field with a calendar icon at the end), but when I click anywhere on that field or the icon the calendar doesn't show up.

I've re-read the Installation tutorial but I don't see anything missing.

Answer Source


  <script src=""></script>


<script src=""></script>

You should get TypeError: $(...).datetimepicker is not a function in the browser console.

Because you include only datepicker not datetimepicker.

Live Demo

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download