Jquery DataTable列過濾日期選擇器

Question

我已經創建了一個使用Jquery Datatable api的表，它工作得很好，我也實現了jQuery代碼，在表的每一列（底部）都有過濾器，並且它工作得很好。

我有一個名爲「開始日期」的列，我希望將其過濾器設置爲日期選擇器，而不是用戶輸入的輸入，請您幫助我做到這一點。

這裏是我的代碼：

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 

<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script> 
<link rel="stylesheet" 
href="https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css"> 
<link rel="stylesheet" 
href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css"> 

<script type="text/javascript"> 
$(document).ready(function() { 
    // Setup - add a text input to each footer cell 
    $('#example tfoot th').each(function() { 
     var title = $(this).text(); 
     $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
    }); 

    // DataTable 
    var table = $('#example').DataTable({ 


     "scrollCollapse": false, 
     "paging":   true 
    } 
    ); 


    $('#example tbody').on('click', 'tr', function() { 
    $(this).toggleClass('selected'); 
    }); 


    $('#example tbody') 
     .on('mouseenter', 'td', function() { 
      var colIdx = table.cell(this).index().column; 

      $(table.cells().nodes()).removeClass('highlight'); 
      $(table.column(colIdx).nodes()).addClass('highlight'); 
     }); 


    $('#button').click(function() { 
     alert(table.rows('.selected').data().length +' row(s) selected'); 
    }); 

    // Apply the search 
    table.columns().every(function() { 
     var that = this; 

     $('input', this.footer()).on('keyup change', function() { 
      if (that.search() !== this.value) { 
       that 
        .search(this.value) 
        .draw(); 
      } 
     }); 
    }); 
}); 
</script> 

<style> 
tfoot input { 
     width: 100%; 
     padding: 3px; 
     box-sizing: border-box; 
    } 
tr.highlight { 
    background-color: blue !important; 
} 

</style> 





<table id="example" class="display" cellspacing="0" width="100%"> 

     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </thead> 
     <tfoot> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Office</th> 
       <th>Age</th> 
       <th>Start date</th> 
       <th>Salary</th> 
      </tr> 
     </tfoot> 
     <tbody> 
      <tr> 
       <td>Tiger Nixon</td> 
       <td>System Architect</td> 
       <td>Edinburgh</td> 
       <td>61</td> 
       <td>2011/04/25</td> 
       <td>$320,800</td> 
      </tr> 
      <tr> 
       <td>Garrett Winters</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>63</td> 
       <td>2011/07/25</td> 
       <td>$170,750</td> 
      </tr> 
      <tr> 
       <td>Ashton Cox</td> 
       <td>Junior Technical Author</td> 
       <td>San Francisco</td> 
       <td>66</td> 
       <td>2009/01/12</td> 
       <td>$86,000</td> 
      </tr> 
      <tr> 
       <td>Cedric Kelly</td> 
       <td>Senior Javascript Developer</td> 
       <td>Edinburgh</td> 
       <td>22</td> 
       <td>2012/03/29</td> 
       <td>$433,060</td> 
      </tr> 
      <tr> 
       <td>Airi Satou</td> 
       <td>Accountant</td> 
       <td>Tokyo</td> 
       <td>33</td> 
       <td>2008/11/28</td> 
       <td>$162,700</td> 
      </tr> 
      <tr> 
       <td>Brielle Williamson</td> 
       <td>Integration Specialist</td> 
       <td>New York</td> 
       <td>61</td> 
       <td>2012/12/02</td> 
       <td>$372,000</td> 
      </tr> 

     </tbody> 
    </table> 

Answer 1

使用這些鏈接在你的腳本

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script> 
<script src="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js"></script> 
<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.13/themes/smoothness/jquery-ui.css"> 
<link rel="stylesheet" href="https://cdn.datatables.net/plug-ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.css"> 
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> 

那麼這個代碼的頂部在文檔準備函數的頂部。

$(function() { 
$("#datepicker").datepicker(); 
}); 

// Setup - add a text input to each footer cell 
$('#example tfoot th').each(function() { 
    var title = $(this).text(); 
    if (title === "Start date") { 
     $(this).html('<input type="text" id="datepicker" placeholder="Search '+title+'" />'); 
     } 
     else { 
      $(this).html('<input type="text" placeholder="Search '+title+'" />'); 
     } 
}); 

這裏是它的工作在代碼筆http://codepen.io/anon/pen/MJGRpy