data_table.js

// Bootstrap datepicker
$('.input-daterange input').each(function() {
  $(this).datepicker('clearDates');
});

// Set up your table
table = $('#my-table').DataTable({
  paging: false,
  info: false
});

// Extend dataTables search
$.fn.dataTable.ext.search.push(
  function(settings, data, dataIndex) {
    var min = $('#min-date').val();
    var max = $('#max-date').val();
    var createdAt = data[2] || 0; // Our date column in the table

    if (
      (min == "" || max == "") ||
      (moment(createdAt).isSameOrAfter(min) && moment(createdAt).isSameOrBefore(max))
    ) {
      return true;
    }
    return false;
  }
);

// Re-draw the table when the a date range filter changes
$('.date-range-filter').change(function() {
  table.draw();
});

$('#table-filter').keyup(function(){
      table.search($(this).val()).draw() ;
})
// deixando o dataable
$('#my-table_filter').hide();

link.html

<link rel="stylesheet" href="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.15/datatables.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.18.1/moment.min.js" charset="utf-8"></script>
<script src="https://cdn.datatables.net/v/bs-3.3.7/jq-2.2.4/dt-1.10.15/datatables.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.min.js" charset="utf-8"></script>

table_search.html

<div class="container">
    <div class="col-md-12">
        <button type="button" name="add_ticket" class="btn btn-primary">
            Novo <i class="glyphicon glyphicon-plus"></i>
        </button>
    </div>

    <form action="." method="post" class="" >
        <!--  date picker -->
        <div class="col-md-6"  style="margin-top:2em;">
            <div class="row">
                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="date" id="min-date" class="form-control date-range-filter" placeholder="">
                    </div>
                </div>

                <div class="col-xs-6">
                    <div class="form-group">
                        <input type="date" id="max-date" class="form-control date-range-filter" placeholder="">
                    </div>
                </div>
            </div>
        </div>
        <!-- end date picker -->
        <!-- search input  -->
        <div class="col-md-6" style="margin-top:2em;">
                <div class="form-group">
                    <div class="input-group">
                        <input id="table-filter" type="text" class="form-control"
                        placeholder="Buscar por nome numero ">
                        <span class="input-group-btn">
                            <button type="button" name="form_search" class="btn btn-primary">
                                <i class="glyphicon glyphicon-search"></i>
                            </button>
                        </span>
                    </div>
                </div>
        </div>
        <!--  end search bar -->
    </form>

    <div class="col-md-12" style="margin-top:2em;">

        <table id="my-table" class="table table-striped table-bordered" style="width:100%">
          <thead>
            <tr>
              <th>ID</th>
              <th>Name</th>
              <th>Created At</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <th>1</th>
              <th>Bob</th>
              <th>2018-04-20</th>
            </tr>
            <tr>
              <th>2</th>
              <th>Jane</th>
              <th>2018-02-15</th>
            </tr>
            <tr>
              <th>3</th>
              <th>Jill</th>
              <th>2018-02-15</th>
            </tr>
            <tr>
              <th>4</th>
              <th>Joe</th>
              <th>2018-08-06</th>
            </tr>
          </tbody>
        </table>
    </div>

</div>