The docs at bootstrap-datetimepicker don't really explain what version of jquery and moment are required to use the widget (if specific versions are needed). I don't have any jquery errors according to dev tools, and I tested the calendar icon button by adding some quick jquery which worked fine.
($("#datetimepicker10 span").click(function(){
alert('working!');
};
));
Otherwise, I have everything required in the docs loaded in the correct order (I think). However; the icon link doesn't work and thus I cannot select a date nor time. I assume it is something with how files are being loaded or the version of jquery/moment I am using because I tried dropping in this jsfiddle, and it wouldn't work either.
Any ideas would be appreciated. Any hints on how to debug this sort of js error as well would be nice for the future.
Current Code:
<head>
<link href="/static/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="/static/css/bootstrap-datetimepicker.min.css" rel="stylesheet" type="text/css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>
End of body..
<script type='text/javascript' src="/static/js/bootstrap.min.js"></script>
<script type='text/javascript' src="/static/js/bootstrap-datetimepicker.min.js"></script>
$( document ).ready(function() {
$('#startDate').datetimepicker();
});
Lastly, the html:
<div class="container">
<div class="col-sm-6" style="height:75px;">
<div class='col-md-5'>
<div class="form-group">
<div>Start</div>
<div class='input-group date' id='startDate'>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
Please have a look at this fiddle:
$('.datepicker').datetimepicker({
format: 'DD-MM-YYYY HH:mm:ss'
});