title: Column filter with datepicker in datatables in laravel
body: <p>i tried to added the date-picker for individual column, but it doesn't work, the following code not gives me any  error, nor not display the popup window to select the date to search:</p>
  
  <pre><code>$('.search-date').on( 'keyup click change', function () {
              var i =$(this).attr('5');  // getting column index
              var v =$(this).val();  // getting search input value
              dataTable.columns(i).search(v).draw();
          } );
  
          $( ".datepicker" ).datepicker({
              dateFormat: "yy-mm-dd",
              showOn: "button",
              showAnim: 'slideDown',
              showButtonPanel: true ,
              autoSize: true,
              buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
              buttonImageOnly: true,
              buttonText: "Select date",
              closeText: "Clear"
          });
  
          $(document).on("click", ".ui-datepicker-close", function(){
              $('.datepicker').val("");
              this.api().columns(5).search("").draw();
          });
  </code></pre>
  
  <p>Thank you</p>
  
  <p>okay, here is my html page...</p>
  
  <pre><code>&lt;div class="col-lg-12 col-xs-12 col-sm-12"&gt;
      &lt;table class="table table-bordered" id="users-table"&gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;Beneficiary #&lt;/th&gt;
                  &lt;th&gt;Beneficiary Name&lt;/th&gt;
                  &lt;th&gt;Beneficiary ID&lt;/th&gt;
                  &lt;th&gt;Area&lt;/th&gt;
                  &lt;th&gt;Water Amount&lt;/th&gt;
                  &lt;th&gt;Transaction Date&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tfoot class="tfoot"&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th class="search-date"&gt;&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/tfoot&gt;
  
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the j-son data tables script that i used inside my blade/view page to render the table.</p>
  
  <pre><code> $(function () {
   $('#users-table').DataTable({
   processing: true,
   serverSide: true,
   ajax: '{{ url('/data_table_three')}}',
   //                  "columnDefs": [
   //                      { "width": "5%", "targets": 0 }
   //                  ],
   //                  "lengthChange": false,
   columns: [
   {data: 'ben_no', name: 'ben_no', orderable: false},
   {data: 'ben_name', name: 'ben_name', orderable: false},
   {data: 'ben_id', name: 'ben_id', orderable: false},
   {data: 'area_name', name: 'area_name', orderable: false},
   {data: 'trans_water_amount', name: 'trans_water_amount', orderable: false},
   {data: 'trans_date', name: 'trans_date', orderable: false},
  
   ],      initComplete: function () {
   this.api().columns([0,1,2,3,4,5]).every(function () {
   var column = this;
   var input = document.createElement("input");
   $(input).appendTo($(column.footer()).empty())
   .on('keyup change', function () {
   column.search($(this).val(), false, false, true).draw();
  });
  });
  },
  
  });
  });
  
  
  
  $(document).ready(function () {
  $('.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter').css('display', 'none');
  });
  
  $('.tfoot').css('display', 'table-header-group');
  $('.page-content').css('padding', '0');
  $('.tfoot th').css('width', '20');
  
  
  
  $('.search-date').on( 'keyup click change', function () {
  var i =$(this).attr('5');  // getting column index
  var v =$(this).val();  // getting search input value
  dataTable.columns(i).search(v).draw();
  } );
  
  $( ".datepicker" ).datepicker({
  dateFormat: "yy-mm-dd",
  showOn: "button",
  showAnim: 'slideDown',
  showButtonPanel: true ,
  autoSize: true,
  buttonImage: "//jqueryui.com/resources/demos/datepicker/images/calendar.gif",
  buttonImageOnly: true,
  buttonText: "Select date",
  closeText: "Clear"
  });
  
  $(document).on("click", ".ui-datepicker-close", function(){
  $('.datepicker').val("");
  this.api().columns(5).search("").draw();
  });
  </code></pre>
  
  <p>thank you</p>