javascript - 如何在我的表格上设置日期范围过滤器？

Question

嗨，我正在使用 jQuery 数据表。我想在表格上方添加一个日期范围过滤器。这是我的代码：

<link href="~/content/vendor/DataTables-1.10.18/css/dataTables.bootstrap4.min.css" rel="stylesheet">
    <script src="~/content/vendor/DataTables-1.10.18/js/jquery.dataTables.min.js"></script>

过滤器输入

<table border="0" cellspacing="5" cellpadding="5">
                                            <tbody>
                                                <tr>
                                                    <td>Minimum Date:</td>
                                                    <td> <input type="date" class="form-control" id="min" onselect="ons()" name="min" ></td>
                                                </tr>
                                                <tr>
                                                    <td>Maximum Date:</td>
                                                    <td> <input type="date" class="form-control" id="max"  onselect="ons()"name="max"></td>
                                                </tr>
                                            </tbody>
                                        </table> 

桌子

<table class="table table-striped border" id="datatable-table-4">
                                            <thead>
                                                <tr>
                                                    <th>Col1</th>
                                                    <th>Col2</th>
                                                    <th>Col3</th>
                                                    <th>Col4 Start</th>
                                                    <th>Col5 Finish</th>
                                                </tr>
                                            </thead>

脚本 这个 initComplete 函数为每一行创建下拉列表

<script>
        function ons() {
            table.draw();      
                  }
        'user strict'
        $(document).ready(function () {
            
          var table=  $('#datatable-table-4').DataTable({
                initComplete: function () {
                    this.api().columns().every(function () {
                        var column = this;
                        var select = $('<select><option value=""></option></select>')
                            .appendTo($(column.header()).empty())
                            .on('change', function () {
                                var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                                );

                                column
                                    .search(val ? '^' + val + '$' : '', true, false)
                                    .draw();
                            });

                        column.data().unique().sort().each(function (d, j) {
                            select.append('<option value="' + d + '">' + d + '</option>')
                        });
                    });
                }
          });
            
            
         
        });

这些开始和结束日期显示在表格中，我想在第 4 列和第 5 列范围内：

<td>
    @item.StartDate.ToString("dd MMM yyyy ddd HH:mm")
 </td>
    
<td>
   @item.FinishDate.ToString("dd MMM yyyy ddd HH:mm")
 </td>

我在搜索时发现了这个更改代码。我只想制作这个日期范围。我怎样才能让它过滤？谢谢

标签： javascriptjquerydate-rangedatatables-1.10