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="">
<script src=""></script>
<script src=""></script>
<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//"></script>
<script type="text/javascript" src="//"></script>
<link rel="stylesheet" type="text/css" href="//" />
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//"></script>
<link rel="stylesheet" type="text/css" href="//" />
<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>
<span></span> <b class="caret"></b>
6 Answers
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()
<script type="text/javascript" src="" defer></script>
- Just add defer to this particular script and it will work properly
Screenshot of it
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
In my case, i missed to include the moment.js
For me it was having 2 different versions of jQuery installed in react app.
Verified by checking the lock file (package-lock/yarn.lock).
I had specified the version to install in the package.json.
So I ended up having the specified version + one that brings the latest jQuery from another package's dependencies.
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);
