18

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

5
  • 1
    You're loading bootstrap-datepicker but using datetimepicker. These are two seperate packages.
    – h2ooooooo
    Apr 30, 2015 at 9:15
  • It's $( ... ).datepicker({ options }). Read bootstrap-datepicker.readthedocs.org/en/latest (it's also on the project readme)
    – Amelia
    Apr 30, 2015 at 9:15
  • @Andy nope, I'm using that project in BS3 as I type this, and it's most definitely datepicker. - That repo contains both 2 and 3 code.
    – Amelia
    Apr 30, 2015 at 9:20
  • Are you using http://eonasdan.github.io/bootstrap-datetimepicker/Installing/?
    – lshettyl
    Apr 30, 2015 at 9:22
  • @h2ooooooo - Error is no more showing now. Could you please help me now to realign the date-picker text box so that it goes in tandem with the previous row text-box.
    – mindfreak
    Apr 30, 2015 at 9:32

6 Answers 6

27

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>
2
  • Perfect !!! Error is gone... please help me now to realign the date-picker text box so that it goes in tandem with the previous row text-box.
    – mindfreak
    Apr 30, 2015 at 9:30
  • NIce it works but is it providing date object. I checked its providing string. Will you help on this ? Aug 8, 2016 at 5:29
11

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>

6

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.

0

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

0

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

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.

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.