JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdn.datatables.net/1.10.7/css/jquery.dataTables.min.css">
<script src="//cdn.datatables.net/1.10.7/js/jquery.dataTables.min.js"></script>
<div class="col-lg-12">
    <table class="table display" id="activeProjects">
        <thead>
            <tr>
                <th></th>
                <th><span style="white-space: nowrap;">From: <input type="text" id="mindate" name="mindate" class="form-control numberFilter datepicker" /> To: <input class="form-control numberFilter datepicker" type="text" id="maxdate" name="maxdate" /></span></th>
               
            </tr>
            <tr>
                <th>Project Name</th>
                <th>Completion Date</th>
           </tr>
          

        </thead>

        <tbody>
            <tr>
               
                <td></td>
                <td></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <th>Project Name</th>
                <th>Completion Date</th>
            </tr>

        </tfoot>
    </table>
    <button class="btn btn-danger" id="clear">Clear Filters</button>
</div>

CSS

body {
    padding-top: 50px;
    padding-bottom: 20px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-left: 15px;
    padding-right: 15px;
}

/* Set width on the form input elements since they're 100% wide by default */


/* styles for validation helpers */
.field-validation-error {
    color: #b94a48;
}

.field-validation-valid {
    display: none;
}

input.input-validation-error {
    border: 1px solid #b94a48;
}

input[type="checkbox"].input-validation-error {
    border: 0 none;
}

.validation-summary-errors {
    color: #b94a48;
}

.validation-summary-valid {
    display: none;
}

* {
	margin: 0;
}
html, body {
	height: 100%;
}
.wrapper {
	min-height: 100%;
	margin: 0 auto -40px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {

	height: 40px; /* .push must be the same height as .footer */
}

tfoot {
    display: table-header-group;
}


.numberFilter {
    width: 75px;
    white-space: nowrap;
    display:inline-block;
}

JavaScript

$.fn.dataTableExt.afnFiltering.push(
                  function (oSettings, aData, iDataIndex) {

                      var today = new Date();
                      var dd = today.getDate();
                      var mm = today.getMonth() + 1;
                      var yyyy = today.getFullYear();

                      if (dd < 10)
                          dd = '0' + dd;

                      if (mm < 10)
                          mm = '0' + mm;

                      today = dd + '/' + mm + '/' + yyyy;

                      if ($('#min').val() !== '' || $('#max').val() !== '') {
                          var iMin_temp = $('#min').val();
                          if (iMin_temp === '') {
                              iMin_temp = '01/01/2009';
                          }

                          var iMax_temp = $('#max').val();
                          if (iMax_temp === '') {
                              iMax_temp = '01/03/2012';
                          }

                          var arr_min = iMin_temp.split("/");
                          var arr_max = iMax_temp.split("/");
                          var arr_date = aData[4].split("/");

                          var iMin = new Date(arr_min[2], arr_min[0], arr_min[1], 0, 0, 0, 0);
                          var iMax = new Date(arr_max[2], arr_max[0], arr_max[1], 0, 0, 0, 0);
                          var iDate = new Date(arr_date[2], arr_date[0], 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;
                       ...