Javascript BootStrap : Uncaught TypeError: $(...).datetimepicker 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29963634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
BootStrap : Uncaught TypeError: $(...).datetimepicker is not a function
提问by mindfreak
I have just started off with BootStrap, however stranded with
Uncaught TypeError: $(...).datetimepicker is not a functionerror message. Could someone let me know what went missing with this code?
我刚刚开始使用 BootStrap，但被Uncaught TypeError: $(...).datetimepicker is not a function错误消息困住了
。有人可以让我知道此代码丢失了什么吗？
Since then, have referred to multiple similar questions but to no avail.
从那以后，已经提到了多个类似的问题，但都无济于事。
home_page.html
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 WebContentfolder in Eclipse but outsideof META-INFand WEB-INFfolder.
所有文件都放在WebContentEclipse 中outside的文件夹下，但属于META-INF和WEB-INF文件夹。
Files undercssfolder
文件夹下的文件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
- bootstrap-theme.css
- bootstrap-theme.css.map
- bootstrap-theme.min.css
- bootstrap.css
- bootstrap.css.map
- bootstrap.min.css
- 增强.css
- jquery-ui.css
- ui.daterangepicker.css
Files underfontsfolder
文件夹下的文件fonts
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2
- glyphicons-halflings-regular.eot
- glyphicons-halflings-regular.svg
- glyphicons-halflings-regular.ttf
- glyphicons-halflings-regular.woff
- glyphicons-halflings-regular.woff2
Files underjsfolder
文件夹下的文件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
- bootstrap-datepicker.min.css
- bootstrap-datepicker.min.js
- 引导程序.js
- bootstrap.min.js
- 日期.js
- 增强.min.js
- 文件输入.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
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
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
任何指导都值得注意
回答by tokyovariable
回答by Ivan Orellana
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>回答by JobSam
This is a bit late but I know it will help someone:
这有点晚了，但我知道它会帮助某人：
If you are using datetimepickermake sure you include the right CSS and JS files. datetimepickeruses(Take note of their names);
如果您正在使用，请datetimepicker确保包含正确的 CSS 和 JS 文件。datetimepicker用途（记下他们的名字）；
and
和
On the above question asked by @mindfreak,The main problem is due to the imported files.
关于@mindfreak 提出的上述问题，主要问题是由于导入的文件。
回答by sabari vignesh
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. It should fix it! :)
如果您想要缩小版本，请进入“/build”文件夹并获取 jquery.datetimepicker.full.js 或 jquery.datetimepicker.full.min.js 。它应该修复它！:)
回答by Ajmal Tk
You are using an old version of the date picker js. Upgrade datepicker js with latest one.
您正在使用旧版本的日期选择器 js。使用最新版本升级 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>
回答by Nole
I had this problem. Solution for me was to remove links to Vue.js files. Vue.js and JQuery have some conflicts in datepicker and datetimepicker functions.
我有这个问题。我的解决方案是删除指向 Vue.js 文件的链接。Vue.js 和 JQuery 在 datepicker 和 datetimepicker 函数上有一些冲突。
