BootStrap：未捕获的TypeError：$（...）。datetimepicker不是函数

Question

I have just started off with BootStrap, however stranded with Uncaught TypeError: $(...).datetimepicker is not a function error message. 我刚刚开始使用BootStrap，但是Uncaught TypeError: $(...).datetimepicker is not a function了Uncaught TypeError: $(...).datetimepicker is not a function错误消息。 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. 所有文件都放在Eclipse中的WebContent文件夹下，但outside META-INF和WEB-INF文件夹之外。

Files under css folder css 文件夹 下的文件

bootstrap-theme.css 自举theme.css
bootstrap-theme.css.map bootstrap-theme.css.map
bootstrap-theme.min.css 自举theme.min.css
bootstrap.css bootstrap.css
bootstrap.css.map bootstrap.css.map
bootstrap.min.css bootstrap.min.css
enhanced.css enhanced.css
jquery-ui.css jQuery的ui.css
ui.daterangepicker.css ui.daterangepicker.css

Files under fonts folder fonts 下的文件

glyphicons-halflings-regular.eot glyphicons，半身人，regular.eot
glyphicons-halflings-regular.svg glyphicons，半身人，regular.svg
glyphicons-halflings-regular.ttf glyphicons，半身人，regular.ttf
glyphicons-halflings-regular.woff glyphicons，半身人，regular.woff
glyphicons-halflings-regular.woff2 glyphicons，半身人，regular.woff2

Files under js folder js 文件夹 下的文件

bootstrap-datepicker.min.css 自举datepicker.min.css
bootstrap-datepicker.min.js 引导-datepicker.min.js
bootstrap.js bootstrap.js
bootstrap.min.js bootstrap.min.js
date.js date.js
enhance.min.js enhance.min.js
fileinput.jquery.js fileinput.jquery.js
jquery-1.11.2.min.js jQuery的1.11.2.min.js
jquery-1.8.3.min.js jQuery的1.8.3.min.js
jquery-1.9.0.min.js jQuery的1.9.0.min.js
jquery-ui.js jQuery的ui.js
npm.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 1

You are using datetimepicker when it should be datepicker . 您正在使用datetimepicker当它应该是datepicker 。 As per the docs . 按照文档。 Try this and it should work. 试试这个它应该工作。

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

Answer 2

I had the same problem, you have to load first the Moment.js file! 我有同样的问题，你必须首先加载Moment.js文件！

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

Answer 3

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确保包含正确的CSS和JS文件。 datetimepicker uses(Take note of their names); datetimepicker使用（记下他们的名字）;

https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css 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 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. 关于@ mindfreak提出的上述问题，主要问题是由于导入的文件。

Answer 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. 如果你想要缩小版本，进入“/ build”文件夹并获取jquery.datetimepicker.full.js或jquery.datetimepicker.full.min.js。 It should fix it! 它应该解决它！ :) :)

Answer 5

You are using an old version of the date picker js. 您正在使用旧版本的日期选择器js。 Upgrade datepicker js with latest one. 使用最新版本升级datepicker js。

Replace your bootstrap-datetimepicker.min.js file with this will work.. 用这将替换你的bootstrap-datetimepicker.min.js文件..

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/3.1.3/js/bootstrap-datetimepicker.min.js"></script>

Answer 6

I had this problem. 我有这个问题。 Solution for me was to remove links to Vue.js files. 我的解决方案是删除Vue.js文件的链接。 Vue.js and JQuery have some conflicts in datepicker and datetimepicker functions. Vue.js和JQuery在datepicker和datetimepicker函数中有一些冲突。

BootStrap：未捕获的TypeError：$（...）。datetimepicker不是函数

问题描述

6 个解决方案

解决方案1
22 已采纳 2015-04-30 09:18:30

解决方案2
8 2016-01-21 17:19:18

解决方案3
4 2016-01-05 13:52:11

解决方案4
0 2017-03-08 05:45:47

解决方案5
0 2018-09-06 07:18:51

解决方案6
0 2019-07-26 09:56:45

BootStrap：未捕获的TypeError：$（...）。datetimepicker不是函数

问题描述

6 个解决方案

解决方案1 22 已采纳 2015-04-30 09:18:30

解决方案2 8 2016-01-21 17:19:18

解决方案3 4 2016-01-05 13:52:11

解决方案4 0 2017-03-08 05:45:47

解决方案5 0 2018-09-06 07:18:51

解决方案6 0 2019-07-26 09:56:45

解决方案1
22 已采纳 2015-04-30 09:18:30

解决方案2
8 2016-01-21 17:19:18

解决方案3
4 2016-01-05 13:52:11

解决方案4
0 2017-03-08 05:45:47

解决方案5
0 2018-09-06 07:18:51

解决方案6
0 2019-07-26 09:56:45