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

【问题标题】：BootStrap : Uncaught TypeError: $(...).datetimepicker is not a functionBootStrap : Uncaught TypeError: $(...).datetimepicker is not a function
【发布时间】：2015-07-09 21:55:41
【问题描述】：

我刚开始使用 BootStrap，但被困在了 Uncaught TypeError: $(...).datetimepicker is not a function 错误消息。有人可以告诉我这段代码缺少什么吗？

从那时起，已经提到了多个类似的问题，但都无济于事。

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>

所有文件都放在 Eclipse 的 WebContent 文件夹下，但 outside 的 META-INF > 和 WEB-INF 文件夹。

css 文件夹

下的文件

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

fonts 文件夹

下的文件

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

js 文件夹

下的文件

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

错误信息

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

任何指导都值得关注

【问题讨论】：

您正在加载bootstrap-datepicker，但使用的是datetimepicker。这是两个单独的包。
它是$( ... ).datepicker({ options })。阅读bootstrap-datepicker.readthedocs.org/en/latest（也在项目自述文件中）
@Andy 不，我在 BS3 中使用该项目，因为我输入了这个，而且绝对是 datepicker。 - 该 repo 包含 2 和 3 代码。
你在使用http://eonasdan.github.io/bootstrap-datetimepicker/Installing/吗？
@h2ooooooo - 现在不再显示错误。 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.

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

您使用的是datetimepicker，而它应该是datepicker。根据docs。试试这个，它应该可以工作。

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

【讨论】：

完美!!! 错误消失了...现在请帮我重新对齐日期选择器文本框，使其与前一行文本框一致.
很好，但它是否提供日期对象。我检查了它的提供字符串。你会帮忙吗？

【解决方案2】：

我遇到了同样的问题，你必须先加载 Moment.js 文件！

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

【讨论】：

【解决方案3】：

这有点晚了，但我知道它会对某人有所帮助：

如果您使用datetimepicker，请确保包含正确的 CSS 和 JS 文件。 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/js/bootstrap-datetimepicker.min.js

关于@mindfreak 提出的上述问题，主要问题是由于导入的文件。

【讨论】：

【解决方案4】：

你们复制了错误的代码。

进入“/build”文件夹并获取 jquery.datetimepicker.full.js 或 jquery.datetimepicker.full.min.js 如果你想要缩小版本。它应该修复它！ :)

【讨论】：

【解决方案5】：

您使用的是旧版本的日期选择器 js。用最新的更新 datepicker js。

用这个替换你的 bootstrap-datetimepicker.min.js 文件就可以了..

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

【讨论】：

【解决方案6】：

我遇到了这个问题。我的解决方案是删除指向 Vue.js 文件的链接。 Vue.js 和 JQuery 在 datepicker 和 datetimepicker 函数上有一些冲突。

【讨论】：