BootStrap: Uncaught TypeError: $(...). Datetimepicker не является функцией

Я только что начал с 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>

Все файлы помещаются в папку WebContent в Eclipse, но outside META-INF и WEB-INF.

Файлы под css папкой

bootstrap-theme.css
bootstrap-theme.css.map
самозагрузки-theme.min.css
bootstrap.css
bootstrap.css.map
bootstrap.min.css
enhanced.css
jquery-ui.css
ui.daterangepicker.css

Файлы в папке fonts

glyphicons-полурослики-regular.eot
glyphicons-полурослики-regular.svg
glyphicons-полурослики-regular.ttf
glyphicons-полурослики-regular.woff
glyphicons-полурослики-regular.woff2

Файлы в папке js

самозагрузки-datepicker.min.css
бутстраповские-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

Любые указания заслуживают внимания

Ответ 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.