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
_フォルダー。
以下のファイルcss
folder
以下のファイルfonts
folder
以下のファイルjs
folder
エラーメッセージ
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
_
任意のガイダンスは注目に値します
datetimepicker
であるべきときにdatepicker
を使用しています。 docs に従って。これを試してみて、動作するはずです。
<script type="text/javascript">
$(function () {
$('#datetimepicker9').datepicker({
viewMode: 'years'
});
});
</script>
私は同じ問題を抱えていました。最初にMoment.jsファイルをロードする必要があります!
<script src="path/moment.js"></script>
<script src="path/bootstrap-datetimepicker.js"></script>
これは少し遅れますが、誰かに役立つことは知っています:
datetimepicker
を使用している場合は、正しいCSSおよびJSファイルを含めるようにしてください。 datetimepicker
uses(名前をメモしてください);
そして
@mindfreakが尋ねた上記の質問で、主な問題はインポートされたファイルによるものです。
この問題がありました。私にとっての解決策は、Vue.jsファイルへのリンクを削除することでした。 Vue.jsとJQueryには、datepicker関数とdatetimepicker関数にいくつかの競合があります。
古いバージョンの日付ピッカー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>
あなたたちは間違ったコードをコピーしました。
「/ build」フォルダーに移動し、縮小版が必要な場合はjquery.datetimepicker.full.jsまたはjquery.datetimepicker.full.min.jsを取得します。それを修正する必要があります! :)