JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/css/datepicker3.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.4/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="http://cdn.datatables.net/plug-ins/505bef35b56/integration/bootstrap/1/dataTables.bootstrap.css">
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.3.1/js/bootstrap-datepicker.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.js"></script>
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script src="'http://www.dwmkerr.com/bower_components' \angular-modal-service\dst\angular-modal-service.min.js"></script>
<script src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js"></script>
<script src="http://cdn.datatables.net/plug-ins/505bef35b56/integration/bootstrap/1/dataTables.bootstrap.js"></script>
<title>Report Template</title>
<body ng-app="reportApp" ng-controller="reportController">
	
	<div><h1>Report for Logging Applications</h1></div>
	<div class="col-md-8 col-md-offset-2">
		<form class="form-horizontal" role="form" name="form" id="form" ng-model="form">
			<div class="form-group">
				<label class="col-sm-4 control-label">Start Date</label>
				<div class="col-sm-6">
					<p class="input-daterange input-group" id="datepicker">
						<input id="min" name="min" type="text" class="input-sm form-control" ng-model="min"/>
					</p>
				</div>
			</div>
			
			<div class="form-group">
				<label...

CSS

@CHARSET"ISO-8859-1";
 table {
    border: 1px solid #53565A;
}
table th {
    background-color: #FFFFFF;
}
table tr:nth-child(even) {
    background-color: #FFFFFF;
}
table tr:nth-child(odd) {
    background-color: #D9D9D6;
}
body {
    font-family: Arial, Helvetica, sans-serif;
    background-color: #D9D9D6;
}
h1, h2, h3, p, label, th, td {
    color: #53565A;
}
h1 {
    font-size: 30px;
    text-align: center;
    color: #EAAA00;
}
h2 {
    font-size: 20px;
}
h3 {
    font-size: 18px;
}
p, label {
    font-size: 14px;
}
button {
    cursor: pointer;
}
header {
    padding: 5px;
    background-color: #D9D9D6;
}
div {
    padding: 0px;
}
.form-group {
    padding: 1px;
}
#myTable_wrapper {
    padding-top: 50px;
}
#tableDiv {
    padding-right: 12px;
    padding-left: 12px;
}
#details {
    padding-left: 12px;
}

JavaScript

$.fn.dataTableExt.afnFiltering.push(

function (oSettings, aData, iDataIndex) {
    var min = $('#min').val();
    var max = $('#max').val();

    if (min === '' && max === '') {
        return true;
    }

    if (min !== '' || max !== '') {
        var iMin_temp = min

        if (iMin_temp === '') {
            iMin_temp = '01/01/2000';
        }

        var iMax_temp = max

        if (iMax_temp === '') {
            iMax_temp = '31/12/2999'
        }

        var arr_min = iMin_temp.split("/");
        var arr_max = iMax_temp.split("/");

        // aData[column with dates]
        var arr_date = aData[1].split("/");
        var iMin = new Date(arr_min[2], parseInt(arr_min[0]) - 1, arr_min[1], 0, 0, 0, 0)
        var iMax = new Date(arr_max[2], parseInt(arr_max[0]) - 1, arr_max[1], 0, 0, 0, 0)
        var iDate = new Date(arr_date[2], parseInt(arr_date[0]) - 1, arr_date[1], 0, 0, 0, 0)

        if (iMin === "" && iMax === "") {
            return true;
        } else if (iMin === "" && iDate < iMax) {
            return true;
        } else if (iMin <= iDate && "" === iMax) {
            return true;
        } else if (iMin <= iDate && iDate <= iMax) {
            return true;
        }
        return false;
    }
});

$(document).ready(function () {
    $('.input-daterange').datepicker({});

    $('.input-daterange').on('change', function () {
        $('.datepicker').hide();
    });

    var oTable = $('#myTable').dataTable({
        "bInfo": false,
            "bPaginate": false,
            "sDom": 'lrtip',

        initComplete: function () {
            var api = this.api();

            api.columns('.filtersearch').indexes().flatten().each(function (i) {
                var column = api.column(i);
                var select = $('<select></select>')
                    .appendTo($(column.footer()).empty())
                    .on('change', function () {
                    var val = $.fn.dataTable.util.escapeRegex(
                   ...