Datarangepicker Datatables

by imiguelsalcedo

HTML

<script src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<script src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css">
<script src="//cdn.datatables.net/1.10.10/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="//cdn.datatables.net/1.10.10/css/jquery.dataTables.css">


<div class="container">
<div class="row">
<label class="col-sm-12 col-md-12"></label>
</div>
	<div class="row">
		<label class="col-sm-12 col-md-12">
		<form class="form-horizontal">
			<fieldset>
				<div class="control-group">
					<div class="controls">
						<div class="input-prepend input-group"> <span class="add-on input-group-addon"><i class="glyphicon glyphicon-calendar fa fa-calendar"></i></span>
							<input type="text" style="width: 200px" name="reportrange" id="reportrange" class="form-control" value="">
						</div>
					</div>
				</div>
			</fieldset>
		</form>
		</label>
	</div>
	<div class="row">
	<div class="table-responsive">
			<table id="table_id" class="table table-striped table-bordered" cellspacing="0" width="100%">
<thead class="filters">
					<tr>
						<th>Stat.</th>
						<th class="FilterinputSearch">creation</th>
						<th>Col1</th>
						<th class="FilterinputSearch">Col2</th>
						<th class="FilterinputSearch">col3</th>
						<th class="FilterinputSearch">Col4</th>
						<th class="FilterinputSearch">Col5</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Approved</td>
						<td>08/08/2015</td>
						<td title="Nouveau Contrat">nv. ctr.</td>
						<td>Donnée 1</td>
						<td>Donnée 1</td>
						<td>Donnée 1</td>
						<td>Donnée 1</td>
					</tr>
					<tr>
						<td>Rejected</td>
						<td>15/08/2015</td>
						<td>prlg. smpl.</td>
						<td>Donnée 2</td>
						<td>Donnée 2</td>
						<td>XTLE<span style="display:...

JavaScript

$(document).ready(function() {
//DATATABLE
//To display datatable without search and page length select, and to still have pagination work, instantiate like so
var oTable=$('#table_id').dataTable({
	
	//"sDom":"tp",
	"pageLength": 10,
	"pagination":true,
		// Date Sorting
	columnDefs: [
       { type: 'date-eu', targets: 1}
     ],
	 //// order table onload
"order": [[ 1, 'desc' ]],
	});
//DATE RANGE
//set global vars that are set by daterange picker, to be used by datatable
var startdate;
var enddate;
//instantiate datepicker and choose your format of the dates
$('#reportrange').daterangepicker({
        ranges: {
           "HOy": [moment(), moment()],
           'Hier': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
           'Les 7 derniers jours': [moment().subtract(6, 'days'), moment()],
           'Les 30 derniers jours': [moment().subtract(29, 'days'), moment()],
           'Ce mois-ci': [moment().startOf('month'), moment().endOf('month')],
           'Le mois dernier': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
        }
,
    "opens": "right",
	format: 'DD/MM/YYYY'

},
function(start, end,label) {
// Parse it to a moment
var s = moment(start.toISOString());
var e = moment(end.toISOString());
startdate = s.format("YYYY-MM-DD");
enddate = e.format("YYYY-MM-DD");
});
//Filter the datatable on the datepicker apply event
$('#reportrange').on('apply.daterangepicker', function(ev, picker) {
startdate=picker.startDate.format('YYYY-MM-DD');
enddate=picker.endDate.format('YYYY-MM-DD');
oTable.fnDraw();
});

$.fn.dataTableExt.afnFiltering.push(
function( oSettings, aData, iDataIndex ) {
if(startdate!=undefined){
// 0 here is the column where my dates are.
//Convert to YYYY-MM-DD format from DD/MM/YYYY
var coldate = aData[1].split("/");
var d = new Date(coldate[2], coldate[1]-1 , coldate[0]);
var date = moment(d.toISOString());
date =    date.format("YYYY-MM-DD");

//Remove hyphens from...