BootStrap : Uncaught TypeError: $(…).datetimepicker is not a function

BootStrap : Uncaught TypeError: $(…).datetimepicker is not a function

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




Health Insurance







All the files are placed under WebContent folder in Eclipse but outside of META-INF and WEB-INF folder.
Files under css folder

bootstrap-theme.css
bootstrap-theme.css.map
bootstrap-theme.min.css
bootstrap.css
bootstrap.css.map
bootstrap.min.css
enhanced.css
jquery-ui.css
ui.daterangepicker.css

Files under fonts folder

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
glyphicons-halflings-regular.woff2

Files under js folder

bootstrap-datepicker.min.css
bootstrap-datepicker.min.js
bootstrap.js
bootstrap.min.js
date.js
enhance.min.js
fileinput.jquery.js
jquery-1.11.2.min.js
jquery-1.8.3.min.js
jquery-1.9.0.min.js
jquery-ui.js
npm.js

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

Solutions/Answers:

Solution 1:

You are using datetimepicker when it should be datepicker. As per the docs. Try this and it should work.

<script type="text/javascript">
  $(function () {
    $('#datetimepicker9').datepicker({
      viewMode: 'years'
    });
  });
 </script>

Solution 2:

I had the same problem, you have to load first the Moment.js file!

<script src="path/moment.js"></script>
<script src="path/bootstrap-datetimepicker.js"></script>

Solution 3:

This is a bit late but I know it will help someone:

Related:  TypeError: $(…).popover is not a function bootstrap issues

If you are using datetimepicker make sure you include the right CSS and JS files. datetimepicker uses(Take note of their names);

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css

and

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js

On the above question asked by @mindfreak,The main problem is due to the imported files.

Solution 4:

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! 🙂

Solution 5:

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>

References