类型错误：$(...).daterangepicker 不是一个函数。

Question

我无法访问日期范围选择器。当我点击它时，什么也没有发生。在控制台中，它显示了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>

- Salman Khan

Answer 1

你在两个地方都引入了jQuery，一次在第2行，另一次在第5行。尝试删除其中一个引用，但确保在引入Bootstrap之前。

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

- Seanvm

---

除非你重新排列包含文件，否则删除第一个将破坏引导程序。 - jmoerdyk

我移除了这段代码... <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script> - Salman Khan

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

Answer 2

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

• 只需在这个特定的脚本中添加 defer，它就会正常工作

它的截图如下

- Abdullah Jatu

Answer 3

在我的情况下（使用laravel mix），这是由于app.js上的"defer"造成的。 因此，解决方案是为moment和daterangepicker.js添加defer。 有关defer如何工作的更多细节，请参考此处 https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer

- Eko Syahputra

Answer 4

对我来说，这是在React应用程序中安装了2个不同版本的jQuery。

通过检查锁定文件（package-lock / yarn.lock）进行验证。 我已经在package.json中指定了要安装的版本。

所以最终我得到了指定的版本+从另一个包的依赖项中带来的最新jQuery版本。

- Vishal Sodah

Answer 5

在我的情况下，我忘记了包含 moment.js。

- sh6210

Answer 6

如果不使用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);

- Muhammad Zubair Saleem

---

现在，控制台中没有错误，但是如果我尝试点击日期选择器，什么也不会发生。 - Salman Khan

将此代码粘贴到控制台窗口中，然后再试一次。 - Muhammad Zubair Saleem

我正在尝试在Power BI自定义可视化中解决类似的问题。但仍然出现相同的错误：TypeError: jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker不是一个函数。 - Aakash Kumar

@MuhammadZubairSaleem，package.json 的格式如下： "@types/daterangepicker": "^2.1.17", "@types/jquery": "^2.0.41", "daterangepicker": "^3.0.5", "jquery": "^3.2.1"，请问这里有什么问题吗？我也安装了最新版本的 moment，但仍然出现相同的错误。 - Aakash Kumar

为什么这是被接受的答案？我在这里没有看到任何最终解决方案。移除JQuery OnLoad并不会改变错误。 - tak3shi