I feel like I could use another pair of eyes on my code right now.
I am using jQuery UI's Datepicker to grab dates from two html inputs:
<!-- HTML inputs -->
<p id=date_filter>
<span id=date-label-from class=date-label><?php echo LANG_FROMDATE; ?>: </span><input class=date_range_filter date type=text id=datepicker_min /><img id=calender-from class=datepicker-calender src=includes/js/jquery/jquery-ui/img/calendar.png width=17px height=18px />
<span id=date-label-to class=date-label><?php echo LANG_TODATE; ?>: </span><input class=date_range_filter date type=text id=datepicker_max /><img id=calender-to class=datepicker-calender src=includes/js/jquery/jquery-ui/img/calendar.png width=17px height=18px />
<button class=btn id=reset_btn><?php echo LANG_RESET; ?></button>
</p>
That calender img tag is just an icon that also triggers the datepicker, i.e. like this:
$(document).ready(function() {
$('#calender-from').click(function() {
$(#datepicker_min).datepicker(show);
});
$('#calender-to').click(function() {
$(#datepicker_max).datepicker(show);
});
});
So that's the basic stuff that's all good. The issue I'm having is I have written javascript that is an extension to the DataTables filtering api. I wrote my code based on this example: https://datatables.net/examples/plug-ins/range_filtering.html
The problem is right now my code is only working in Google Chrome and fails in FireFox, Safari, and Internet Explorer. I probably am just missing something small or have some minor semantic mistake in my code.
I extend the DataTables filtering API like this:
// Date range filter
var minDateFilter = ;
var maxDateFilter = ;
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if ( typeof aData._date == 'undefined' ) {
aData._date = new Date(aData[0]).getTime();
}
if ( minDateFilter && !isNaN(minDateFilter) ) {
if ( aData._date < minDateFilter ) {
return false;
}
}
if ( maxDateFilter && !isNaN(maxDateFilter) ) {
if ( aData._date > maxDateFilter ) {
return false;
}
}
return true;
}
);
This way seems to return false in other browsers because I will get a result of Showing 1 - 50 of 67 records regardless of what data I have in the datapicker inputs.
I'm handling the jQuery UI Datepicker inputs like this:
$(document).ready(function() {
$(#datepicker_min).datepicker({
onSelect: function(date) {
minDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function(){
minDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
$( #datepicker_max ).datepicker( {
onSelect: function(date) {
maxDateFilter = new Date(date).getTime();
oTable.fnDraw();
}
}).keyup(function(){
maxDateFilter = new Date(this.value).getTime();
oTable.fnDraw();
});
});
I also tried extending the filter API like this (to be closer to original DataTables example):
$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
var iMin = minDateFilter;
var iMax = maxDateFilter;
var iDate = new Date(aData[0]).getTime();
if ( iMin == && iMax == )
{
return true;
}
else if ( iMin == && iDate < iMax )
{
console.log(iDate 1 = +iDate);
return true;
}
else if ( iMin < iDate && == iMax )
{
console.log(iDate 2 = +iDate);
return true;
}
else if ( iMin < iDate && iDate < iMax )
{
console.log(iDate = 3 +iDate);
return true;
}
return false;
}
);
When I do it this way I get a somewhat similar result of my filter code working correctly only in Chrome, and in the other browsers I'll get a result of Showing 0 to 0 records (filtered from 67 total records) so here it returns true but it filters incorrectly - i.e. it shows 0 results after filtering regardless of what values are in the datepicker inputs.
Ugh! why is my code only working in Google Chrome and not working in other browsers (Safari, IE, FireFox)?? Any help is appreciated, thanks in advance!
