$(...).datepicker 不是一个函数 - JQuery - Bootstrap
Posted
技术标签:
【中文标题】$(...).datepicker 不是一个函数 - JQuery - Bootstrap【英文标题】:$(...).datepicker is not a function - JQuery - Bootstrap 【发布时间】:2016-11-02 06:28:20 【问题描述】:我正在尝试将 datepicker
包含在 Bootstrap 中,但出现以下错误:
Uncaught TypeError: $(...).datepicker is not a function
我不明白它为什么在那里。我已经查看了此错误的其他情况,但没有一个与我的匹配。
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:
$(document).ready(function()
$('.datepicker').datepicker(
format: 'dd/mm/yyyy'
);
);
添加 JQuery UI 后更新
现在如下所示:
【问题讨论】:
你只包含jquery而不包含jquery ui... 插件引用说datetimepicker
,而你正在调用datepicker
请检查您是否在一个文件中错误地包含了两次引导日期时间选择器(大部分时间都在最后)..
@PrakashThete 不,只有一次
【参考方案1】:
也需要包含 jquery-ui:
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
【讨论】:
看看这里的来源jqueryui.com/datepicker也许你需要一个css样式表 这是 JQuery 日期选择器。我正在寻找引导日期选择器 bootstrap-datepicker.readthedocs.io/en/latest 您可以检查所有依赖项是否正常。也要小心 bootstrap-jquery 的冲突! 我添加了所有必要的文件。我找不到任何关于添加 JQuery UI 的内容 你也调用了错误的函数作为@François_Richard answer【参考方案2】:我认为不是正确的函数名称
$(document).ready(function()
$('.datepicker').datetimepicker(
format: 'dd/mm/yyyy'
);
);
【讨论】:
用这个试过了,input
末尾的图标就消失了
通过使用一些 CDN 文件而不是本地文件并将函数命名为 datetimepicker
来修复它【参考方案3】:
要摆脱看起来不好的日期选择器,您需要添加 jquery-ui css
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css">
【讨论】:
【参考方案4】:你需要包含 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>
【讨论】:
【参考方案5】:我有类似的问题。我发现的快速解决方法是更改:
<div class="input-group datepicker" data-provide="datepicker">
到
<div class="input-group date" data-provide="datepicker">
【讨论】:
【参考方案6】: <script type="text/javascript">
var options=
format: 'mm/dd/yyyy',
todayHighlight: true,
autoclose: true,
;
$('#datetimepicker').datepicker(options);
</script>
【讨论】:
【参考方案7】:我通过安排加载 JS 的顺序解决了这个问题。
你需要把它作为 jQuery -> datePicker -> Init js
在标题中调用 JQuery,在 jquery 下方的 head 中调用 datePicker 脚本,在页脚中调用 Init JS
【讨论】:
如果你把你的初始化代码放在.ready()
,我不认为加载顺序不重要?
是的,应该也可以。但拥有正确的顺序总是一个好习惯【参考方案8】:
您可以尝试以下方法,它对我有用。
导入以下 scripts 和 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">
我使用的日期选择器的 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>
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>
【讨论】:
以上是关于$(...).datepicker 不是一个函数 - JQuery - Bootstrap的主要内容,如果未能解决你的问题,请参考以下文章
Encore webpack 问题,因为 datepicker() 不是函数
$(...)。datepicker不是函数--JQuery - Bootstrap
jQuery.Deferred 异常:$(...).datepicker 不是函数
jQuery Datepicker:setDate 不是函数