Bootstrap Datetimepicker not functioning

Question

I am experimenting with the excellent Bootstrap DateTimePicker plugin but appear to have hit the buffers right at the start. The page control appears correctly but the calendar button is entirely unresponsive - no picker actually pops up. I have created this fiddle to illustrate the problem. Examining the console output for the fiddle does not reveal anything obviously wrong.

I noticed that the sample code uses jQuery 1.8.3 so I tried dropping back to that but to no avail. I suspect that I am getting something wrong here but I cannot quite figure out what that might be. I'd be most grateful for any help.

The test markup I am using is quite straightforward - and copied directly from the Datetimepicker example docs

<div class="form-group">
  <label for="dtp_singleshot" class="col-md-2 control-label">Choose</label>
  <div class="input-group date form_datetime col-md-5" data-link-
   field="dtp_singleshot">
  <input class="form-control" size="16" type="text" value="" readonly>
  <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  </div>
<input type="hidden" id="dtp_singleshot" value="" /><br/>
</div>

Answer 1

First of all, you have to remove readonly attribute from your input. You don't need second hidden input. Then you have to assign id of dtp_singleshot to your input-group or input.

<div class="form-group">
  <label for="dtp_singleshot" class="col-md-2 control-label" id="dtp_singleshot">Choose</label>
  <div class="input-group date form_datetime col-md-5" data-link-
   field="dtp_singleshot">
  <input class="form-control" size="16" type="text" value="">
  <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
  <span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
  </div>
</div>

JSFIDDLE