JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
Date Start: <input type="text" id="dateStart"><br>
Date End: <input type="text" id="dateEnd"><br>
<table id="theTable">
<thead>
<th>TextCol1</th>
<th>TextCol2</th>
<th>IntCol3</th>
<th>DateCol4</th>
<th>TextCol5</th>
</thead>
<tbody>
<tr>
<td>col</td>
<td>col2</td>
<td>45</td>
<td class="date-filterable">2014-12-18 00:08:45</td>
<td>col5</td>
</tr>
<tr>
<td>col</td>
<td>col2</td>
<td>45</td>
<td class="date-filterable">2014-12-20 00:08:45</td>
<td>col5</td>
</tr>
<tr>
<td>col</td>
<td>col2</td>
<td>45</td>
<td class="date-filterable">2014-12-22 00:08:45</td>
<td>col5</td>
</tr>
<tr>
<td>col</td>
<td>col2</td>
<td>45</td>
<td class="date-filterable">2014-12-24 00:08:45</td>
<td>col5</td>
</tr>
</tbody>
JavaScript
var t = $('#theTable');
var dateStart = $('#dateStart');
var dateEnd = $('#dateEnd');
var dt = t.DataTable();
/* Custom filtering function which will search date in date columns between two values */
$('#dateStart, #dateEnd').on('keyup mouseup', function(){
dt
.column( 3 )
.data()
.filter( function( value, index ) {
var start = $('#dateStart').val();
var end = $('#dateEnd').val();
console.log( 'test', value, index, start, end );
if( !start && !end ){
console.log( 'no start, no end');
return true;
}else if( start && !end && value >= start ){
console.log( 'no end, val >= start');
return true;
}else if ( start && end && value >= start && value < end ){
console.log( 'value >= start, < end');
return true;
}
console.log( 'filter me out');
return false;
});
dt.draw();
});