web-dev-qa-db-ja.com

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

すべてのファイルはEclipseのWebContentフォルダーに配置されますが、outside of _META-INF_および_WEB-INF_フォルダー。

以下のファイルcssfolder

  • 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

以下のファイルfontsfolder

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

以下のファイルjsfolder

  • 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_

任意のガイダンスは注目に値します

javascriptjqueryhtmlcsstwitter-bootstrap
16
mindfreak

datetimepickerであるべきときにdatepickerを使用しています。 docs に従って。これを試してみて、動作するはずです。

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

私は同じ問題を抱えていました。最初にMoment.jsファイルをロードする必要があります！

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

これは少し遅れますが、誰かに役立つことは知っています：

datetimepickerを使用している場合は、正しいCSSおよびJSファイルを含めるようにしてください。 datetimepicker uses（名前をメモしてください）;

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
JobSam

この問題がありました。私にとっての解決策は、Vue.jsファイルへのリンクを削除することでした。 Vue.jsとJQueryには、datepicker関数とdatetimepicker関数にいくつかの競合があります。

0
Nole

古いバージョンの日付ピッカー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>
0
Ajmal Tk

あなたたちは間違ったコードをコピーしました。

「/ build」フォルダーに移動し、縮小版が必要な場合はjquery.datetimepicker.full.jsまたはjquery.datetimepicker.full.min.jsを取得します。それを修正する必要があります！ :)

0
sabari vignesh