Javascript $(...).datepicker 不是函数 - JQuery - Bootstrap
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38118371/
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
$(...).datepicker is not a function - JQuery - Bootstrap
提问by Chris
I'm trying to include the datepickerfor Bootstrap but am getting the following error:
我正在尝试包含datepickerfor Bootstrap，但出现以下错误：
Uncaught TypeError: $(...).datepicker is not a function
Uncaught TypeError: $(...).datepicker is not a function
I don't see why it's there. I've looked at other cases of this error, but none match mine.
我不明白为什么它在那里。我已经查看了此错误的其他情况，但没有一个与我的匹配。
HTML:
HTML：
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="<?php echo BASE_URL; ?>/js/moment.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/main.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="geboortedatum">Geboortedatum:</label>
<div class="input-group datepicker" data-provide="datepicker">
<input type="text" name="geboortedatum" id="geboortedatum" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>
JS:
JS：
$(document).ready(function() {
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
});
});
UPDATE after adding JQuery UI
添加 JQuery UI 后更新
It now looks like the following:
现在看起来像这样：
采纳答案by Fran?ois Richard
Not the right function name I think
我认为不是正确的函数名称
$(document).ready(function() {
$('.datepicker').datetimepicker({
format: 'dd/mm/yyyy'
});
});
回答by Franky
Need to include jquery-ui too:
也需要包含 jquery-ui：
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
回答by simplfuzz
To get rid of the bad looking datepicker you need to add jquery-ui css
要摆脱看起来很糟糕的日期选择器，您需要添加 jquery-ui css
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
回答by Eytibi
You need to include jQueryUI
您需要包含 jQueryUI
$(document).ready(function() {
$('.datepicker').datepicker({
format: 'dd/mm/yyyy'
});
});<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js" integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE=" crossorigin="anonymous"></script>
<script src="<?php echo BASE_URL; ?>/js/moment.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/bootstrap-datetimepicker.min.js"></script>
<script src="<?php echo BASE_URL; ?>/js/main.js"></script>
<div class="col-md-6">
<div class="form-group">
<label for="geboortedatum">Geboortedatum:</label>
<div class="input-group datepicker" data-provide="datepicker">
<input type="text" name="geboortedatum" id="geboortedatum" class="form-control">
<div class="input-group-addon">
<span class="glyphicon glyphicon-th"></span>
</div>
</div>
</div>
</div>回答by Ali A Delhvi
I had similiar problem. The quick fix I found is to change:
我有类似的问题。我发现的快速解决方法是更改：
<div class="input-group datepicker" data-provide="datepicker">
to
到
<div class="input-group date" data-provide="datepicker">
回答by Tula Hean
<script type="text/javascript">
var options={
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
};
$('#datetimepicker').datepicker(options);
</script>
回答by Abhimanyu Vyas
I resolved this by arranging the order in which your JS is being loaded.
我通过安排加载 JS 的顺序解决了这个问题。
You need to have it as jQuery -> datePicker -> Init js
你需要把它作为 jQuery -> datePicker -> Init js
Call your JQuery in your header, datePicker script in head below your jquery and Init JS in footer
在页眉中调用 JQuery，在 jquery 下方的头部中调用 datePicker 脚本，在页脚中调用 Init JS
回答by Dulith De Costa
You can try the following and it worked for me.
您可以尝试以下操作，它对我有用。
Import following scriptsand cssfiles as there are used by the date picker.
导入日期选择器使用的以下脚本和css文件。
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
The JS coding for the Date Picker I use.
我使用的日期选择器的 JS 编码。
<script>
$(document).ready(function(){
// alert ('Cliecked');
var date_input=$('input[name="orangeDateOfBirthForm"]'); //our date input has the name "date"
var container=$('.bootstrap-iso form').length>0 ? $('.bootstrap-iso form').parent() : "body";
var options={
format: 'dd/mm/yyyy', //format of the date
container: container,
changeYear: true, // you can change the year as you need
changeMonth: true, // you can change the months as you need
todayHighlight: true,
autoclose: true,
yearRange: "1930:2100" // the starting to end of year range
};
date_input.datepicker(options);
});
</script>
The HTML Coding:
HTML编码：
<input type="text" id="orangeDateOfBirthForm" name="orangeDateOfBirthForm" class="form-control validate" required>
<label data-error="wrong" data-success="right" for="orangeForm-email">Date of Birth</label>
