$(...).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】:

您可以尝试以下方法,它对我有用。

导入以下 scriptscss 文件,这些文件供 日期选择器使用。

<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 不是函数

datepicker 引导程序中的“TypeError:date.match 不是函数”

MVC 项目中的 jQuery 错误:Datepicker 不是函数