I'm trying to install this datetimepicker for bootstrap: https://github.com/Eonasdan/bootstrap-datetimepicker/wiki/Installation
I've got this in the header of my document:
<script src="/js/jquery-1.11.1.min.js"></script>
<script src="/js/moment.min.js"></script>
And this in the footer:
<script src="/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
And here is the code using the picker:
<div class="form-group">
<div class='input-group date' >
<input type='text' name="picker" class="form-control" id='datetimepicker'/>
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
});
</script>
The problem is that .datetimepicker is an "unresolved function". Why?
Edit:
The IDE (PHPStorm) says that it's unresolved function. And actually running it in Chrome confirms:
bootstrap-datetimepicker.min.js:1 Uncaught TypeError: undefined is not a function
myfile.php:42 Uncaught TypeError: undefined is not a function
bootstrap-datetimepicker.min.js:1 Uncaught Error: Must choose at least one picker
Edit2: I updated the header/footer. Header:
Footer:
<script src="/js/bootstrap.min.js"></script>
<script src="/js/moment.min.js"></script>
<script src="/js/bootstrap-datetimepicker.min.js"></script>
<script src="/js/bootstrap-rowlink.js"></script>
<script src="/js/myscripts.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker').datetimepicker();
});
</script>
Now IDE recognizes datetimepicker() as a function, but still the same problem in Chrome! (see above)
Try including only jQuery in the header:
<link rel="stylesheet" type="text/css" media="screen" href="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/build/css/bootstrap-datetimepicker.min.css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.1.min.js"></script>
and these in the footer:
<script type="text/javascript" src="scripts/bootstrap.min.js"></script>
<script type="text/javascript" src="scripts/moment.js"></script>
<script type="text/javascript" src="//cdn.rawgit.com/Eonasdan/bootstrap-datetimepicker/master/src/js/bootstrap-datetimepicker.js"></script>
The author uses jQuery 2.1.1 so his plugin may be reliant on that version.
EDIT
I cannot get it to work, either. However, there are a few Issues created on its Github page since Moment.js has been updated to version 2.8.4. Try Smalot's Bootstrap Datepicker. It's also well maintained and it works for me.