php 类型错误：$(...).daterangepicker不是函数

bbmckpt7 于 2023-03-11 发布在 PHP

关注(0)|答案(6)|浏览(166)

我无法访问数据范围选择器。当我单击它时，没有发生任何事情。在控制台中，显示TypeError：$（...）.daterangepicker不是一个函数。我在其他页面上使用了相同的代码，运行良好。

这是我大脑中的代码。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/3/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />
<link rel="stylesheet" href="<?php echo base_url();?>ui/css/custom.css">

<script>
$(function() {

    var start = moment().subtract(29, 'days');
    var end = moment();

    function cb(start, end) {
        $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
    }

    $('#reportrange').daterangepicker({
        startDate: start,
        endDate: end,
        ranges: {
           'Today': [moment(), moment()],
           'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Last 7 Days': [moment().subtract(6, 'days'), moment()],
           'Last 30 Days': [moment().subtract(29, 'days'), moment()],
           'This Month': [moment().startOf('month'), moment().endOf('month')],
           'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
    }, cb);

    cb(start, end);
    
});
</script>

这是我的php文件中的代码。

<div id="reportrange" class="pull-right" style="background: #fff; cursor: pointer; padding: 5px 10px; border: 1px solid #ccc; width: 100%">
<i class="glyphicon glyphicon-calendar fa fa-calendar"></i>&nbsp;
<span></span> <b class="caret"></b>

php

来源：https://stackoverflow.com/questions/49931480/typeerror-daterangepicker-is-not-a-function

6条答案

按热度按时间

7gcisfzg1#

您包含了jQuery两次。一次在第2行，另一次在第5行。尝试删除其中一个，但要确保将其包含在Bootstrap之上。
或者，如果您需要这两种功能，可以考虑使用jQuery.noConflict()

赞(0）回复(0）举报 2023-03-11

z9ju0rcb2#

在我的例子中（在laravel mix上），它应该在app.js上使用“defer”。因此，解决方案是为moment和daterangepicker.js添加defer。有关defer如何工作的更多详细信息，请参阅https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer

赞(0）回复(0）举报 2023-03-11

rqcrx0a63#

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js" defer></script>

只需将defer添加到此特定脚本中，它就会正常工作

其截图

赞(0）回复(0）举报 2023-03-11

lxkprmvk4#

在我的例子中，我错过了包括moment.js

赞(0）回复(0）举报 2023-03-11

x7rlezfr5#

对我来说，在react应用程序中安装了两个不同版本的jQuery。通过检查锁文件（package-lock/yarn.lock）进行了验证。我在package.json中指定了要安装的版本。因此，我最终获得了指定的版本+从另一个包的依赖项中获取最新jQuery的版本。

赞(0）回复(0）举报 2023-03-11

pkmbmrz76#

使用这段代码时不要考虑jQuery OnLoad问题。

var start = moment().subtract(29, 'days');
var end = moment();

function cb(start, end) {
    $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
}

$('#reportrange').daterangepicker({
    startDate: start,
    endDate: end,
    ranges: {
       'Today': [moment(), moment()],
       'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
       'Last 7 Days': [moment().subtract(6, 'days'), moment()],
       'Last 30 Days': [moment().subtract(29, 'days'), moment()],
       'This Month': [moment().startOf('month'), moment().endOf('month')],
       'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
    }
}, cb);

cb(start, end);

赞(0）回复(0）举报 2023-03-11

我来回答

php 类型错误：$(...).daterangepicker不是函数

6条答案

相关问题

热门标签

最新问答