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

问题描述

嗨，我正在使用 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>

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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

datatables-1.10 date-range javascript jquery