I have decided to download all of my external CSS and JavaScript files rather than relying on CDNs. After I do this however, I'm coming across the following error for the daterangepicker.js plugin:
TypeError: t is undefined
I've researched the error and everything that I've run across suggests that moment.js is either not referenced at all or it is referenced after the daterangepicker.js file. However, my scripts are defined as such:
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.circliful.min.js"></script>
<script src="js/loader.js"></script>
<script src="js/moment.js"></script>
<script src="js/jquery.daterangepicker.min.js"></script>
I have also ensured that there are no typos as indicated in the following screenshot:
I am also downloading the JavaScript files directly from the source's website rather than from a CDN hosted somewhere:
I don't understand what could be causing this issue and I'm completely at a loss as to how to resolve the issue. What is more frustrating is that if I try to switch back to using CDNs like before, the error persists.
Here is the relevant jQuery code:
// Setup the Agency Report date-picker
$('#date_range').dateRangePicker({
autoClose: true,
format: 'MMMM Do YYYY',
showShortcuts: true,
customShortcuts: [
{
name: 'this week',
dates : function() {
var start = moment().day(0).toDate();
var end = moment().day(6).toDate();
return [start,end];
}
},
{
name: 'this month',
dates : function() {
var start = moment().startOf('month').toDate();
var end = moment().endOf('month').toDate();
return [start,end];
}
},
{
name: 'this year',
dates : function() {
var start = moment().startOf('year').toDate();
var end = moment().endOf('year').toDate();
return [start,end];
}
}]
}).data('dateRangePicker').setDateRange(moment().startOf('year').toDate(), moment().toDate());
Usually when you get the TypeError: t is undefined
error in your console it's because the script can't process one or more of the variables that it's tried to create based on the input field you've targeted.
Most of the time this is due to targeting the incorrect element (i.e. targeting the parent container instead of the actual input). As OP mentioned in their comments, they had switched element ID's and not reflected that in the code.
I've personally had issues by accidentally targeting the parent div of an input field instead of the input field directly.