[javascript] 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

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

  • 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

This question is related to javascript jquery html css twitter-bootstrap

The answer is


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);

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.


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!

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


Examples related to javascript

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax

Examples related to jquery

How to make a variable accessible outside a function? Jquery assiging class to th in a table Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Getting all files in directory with ajax Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) bootstrap 4 file input doesn't show the file name Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource how to remove json object key and value.?

Examples related to html

Embed ruby within URL : Middleman Blog Please help me convert this script to a simple image slider Generating a list of pages (not posts) without the index file Why there is this "clear" class before footer? Is it possible to change the content HTML5 alert messages? Getting all files in directory with ajax DevTools failed to load SourceMap: Could not load content for chrome-extension How to set width of mat-table column in angular? How to open a link in new tab using angular? ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment

Examples related to css

need to add a class to an element Using Lato fonts in my css (@font-face) Please help me convert this script to a simple image slider Why there is this "clear" class before footer? How to set width of mat-table column in angular? Center content vertically on Vuetify bootstrap 4 file input doesn't show the file name Bootstrap 4: responsive sidebar menu to top navbar Stylesheet not loaded because of MIME-type Force flex item to span full row width

Examples related to twitter-bootstrap

Bootstrap 4: responsive sidebar menu to top navbar CSS class for pointer cursor How to install popper.js with Bootstrap 4? Change arrow colors in Bootstraps carousel Search input with an icon Bootstrap 4 bootstrap 4 responsive utilities visible / hidden xs sm lg not working bootstrap.min.js:6 Uncaught Error: Bootstrap dropdown require Popper.js Bootstrap 4 - Inline List? Bootstrap 4, how to make a col have a height of 100%? Bootstrap 4: Multilevel Dropdown Inside Navigation