I have just started off with BootStrap, however stranded with
Uncaught TypeError: $(...).datetimepicker is not a function
error message. Could someone let me know what went missing with this code?
Since then, have referred to multiple similar questions but to no avail.
home_page.html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Health Insurance</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="js/bootstrap-datepicker.min.css">
<link rel="stylesheet" href="css/bootstrap.css">
</head>
<body>
<form role="form">
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="insuredName">Insured Name :</label>
<div class="col-sm-3">
<input class="form-control" type="text" id="insuredName" placeholder="Insured Name">
</div>
</div>
<div class="form-group form-group-sm">
<label class="col-sm-2 control-label" for="rel_PolicyHolder">Relation with Policy Holder :</label>
<div class="col-sm-3">
<input class="form-control" type="text" id="rel_PolicyHolder" placeholder="Relation with Policy Holder"> <br />
<br />
</div>
</div>
<div class="container" >
<div class="col-sm-4" style="height:130px; align:right">
<div class='input-group date'>
<input type='text' class="form-control" id='datetimepicker9' />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
<script src="js/jquery-1.11.2.min.js"></script></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.min.js"></script>
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datetimepicker({
viewMode: 'years'
});
});
</script>
</div>
</div>
</div>
</form>
</body>
</html>
All the files are placed under WebContent
folder in Eclipse but outside
of META-INF
and WEB-INF
folder.
Files under css
folder
Files under fonts
folder
Files under js
folder
Error-message
Uncaught TypeError: $(...).datetimepicker is not a function
(anonymous function) @ home_page.html:82
m.Callbacks.j @ jquery-1.11.2.min.js:2
m.Callbacks.k.fireWith @ jquery-1.11.2.min.js:2
m.extend.ready @ jquery-1.11.2.min.js:2
J @ jquery-1.11.2.min.js:2
Any guidance would be noteworthy
This question is related to
javascript
jquery
html
css
twitter-bootstrap
You guys copied the wrong code.
Go into the "/build" folder and grab the jquery.datetimepicker.full.js or jquery.datetimepicker.full.min.js if you want the minified version. It should fix it! :)
This is a bit late but I know it will help someone:
If you are using datetimepicker
make sure you include the right CSS and JS files. datetimepicker
uses(Take note of their names);
and
On the above question asked by @mindfreak,The main problem is due to the imported files.
I had this problem. Solution for me was to remove links to Vue.js files. Vue.js and JQuery have some conflicts in datepicker and datetimepicker functions.
You are using an old version of the date picker js. Upgrade datepicker js with latest one.
Replace your bootstrap-datetimepicker.min.js file with this will work..
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>
I had the same problem, you have to load first the Moment.js file!
<script src="path/moment.js"></script>_x000D_
<script src="path/bootstrap-datetimepicker.js"></script>
_x000D_
Source: Stackoverflow.com