TypeError: $(...).daterangepicker 不是函数

Posted 2023-05-07

【中文标题】TypeError: $(...).daterangepicker 不是函数

【英文标题】：TypeError: $(...).daterangepicker is not a function

【发布时间】：2018-09-30 13:42:36

【问题描述】：

我无法访问日期范围选择器。当我点击它时，什么都没有发生。在控制台中显示 。 我在其他页面上使用了相同的代码，效果很好。

这是我头部的代码。

<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>

【参考方案1】：

您包含 jQuery 两次。一次在第 2 行，然后在第 5 行。尝试删除其中一个，但确保将其包含在 Bootstrap 之上。

或者，如果您需要两者，您可以考虑使用jQuery.noConflict()

【讨论】：

删除第一个会破坏引导程序，除非您重新排序包含。

我删除了这个...

@SalmanKhan - 这对你有用吗？ codepen.io/seanvm/pen/PewrmZ

【参考方案2】：

在我的情况下（在 laravel mix 上）它应该在 app.js 上“延迟”。 所以解决方案是为 moment 和 daterangepicker.js 添加 defer。 有关延迟工作的更多详细信息，请参阅此 https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer

【参考方案3】：

在没有 jQuery OnLoad iffy 的情况下使用此代码。

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);

【讨论】：

现在，控制台中没有错误，但是，如果我尝试单击 datepicker，则没有任何反应。

将此代码粘贴到控制台窗口中，然后重试。

我正在尝试在 power bi 自定义视觉效果中进行类似的处理。它仍然给我同样的错误。 TypeError: jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker 不是函数

@user3095179 你在那里添加了所需的库？ jQuery, daterangepicker.js

@MuhammadZubairSaleem package.json 具有这种格式。 “@types/daterangepicker”：“^2.1.17”，“@types/jquery”：“^2.0.41”，“daterangepicker”：“^3.0.5”，“jquery”：“^3.2.1”， ...知道这里是否有问题。我还安装了时刻最新版本。仍然给我同样的错误。