$(...).datepicker 不是一个函数 - JQuery - Bootstrap答案

【问题标题】：$(...).datepicker is not a function - JQuery - Bootstrap$(...).datepicker 不是一个函数 - 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 不，只有一次

标签： javascript jquery twitter-bootstrap datepicker

【解决方案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>

【讨论】：