TypeError: $(...).daterangepicker is not a function

Question

I am not able to access daterange picker. When i am clicking it nothing is happening. in the console it is showing that TypeError: $(...).daterangepicker is not a function. I have same code used on other page, which is working fine.

This is code in my head section.

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

And this is code in my php file.

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

Solution 1

Use this code without the 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);

Solution 2

You are including jQuery twice. Once on line 2 and again on line 5. Try removing one of them, but make sure you are including it above Bootstrap.

Alternatively, if you need both you can look into using jQuery.noConflict()

Solution 3

In my case (on laravel mix) its due "defer" on app.js. So the solution is add defer for moment and daterangepicker.js. For more details how defer work refer to this https://html.spec.whatwg.org/multipage/scripting.html#attr-script-defer

Comments

[jmoerdyk]

Removing the first one will break bootstrap, unless you reorder the includes.

[Salman Khan]

I removed this... <script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>

[Salman Khan]

Now, there is no error in console, but, if I am trying to click on datepicker nothing is happening.

[Seanvm]

@SalmanKhan - Does this work for you? codepen.io/seanvm/pen/PewrmZ

[Muhammad Zubair Saleem]

paste this code in the console window and then try again.

[Aakash Kumar]

I am trying to work it out similar in power bi custom visuals. It still gives me same error. TypeError: jquery__WEBPACK_IMPORTED_MODULE_124__(...).daterangepicker is not a function

[Muhammad Zubair Saleem]

@user3095179 you added required libraries in there? jQuery, daterangepicker.js

[Aakash Kumar]

@MuhammadZubairSaleem package.json has this format. "@types/daterangepicker": "^2.1.17", "@types/jquery": "^2.0.41", "daterangepicker": "^3.0.5", "jquery": "^3.2.1", ... Any idea if something is wrong here. I also installed moment latest version. Still it gives me same error.

[Muhammad Zubair Saleem]

@AakashKumar these are types for daterangepicker, not libraries you need to add libraries, can you share that part of package.json file?

[Aakash Kumar]

@MuhammadZubairSaleem I think I mentioned "datarangepicker: 3.0.5. For a detailed view, I mentioned something over here: Please have a look github.com/dangrossman/daterangepicker/issues/1950

[tak3shi]

Why is this the accepted answer? I do not see any final solution here. Removing the JQuery OnLoad does not change the error.