mindfreak mindfreak - 4 years ago 732
HTML Question

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

Answer Source

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>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download