将表格中的日期从过滤到 [英] Filter dates in table from, to

问题描述

我的项目中有桌子

我在表格中按日期进行了过滤

I have filtering by date in my table

现在，它仅按日期中的值过滤，但我想按日期中的日期过滤.

Now it filters only by Date from value, but I want to filter it from-to dates.

我该怎么办?

这是演示我的问题的代码段

Here is snippet that demonstrates my problem

 $('#datefilterfrom').change(function () {
        var date = moment(this.value).format('DD/MM/YYYY');
        var filter, table, tr, td, i;
        filter = date.toUpperCase();
        table = document.getElementById("testTable");
        tr = table.getElementsByTagName("tr");
        for (i = 0; i < tr.length; i++) {
            td = tr[i].getElementsByTagName("td")[2];
            if (td) {
                if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
                    tr[i].style.display = "";
                } else {
                    tr[i].style.display = "none";
                }
            }

        }

    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
 <div class="row">
        <div class="col-md-3">
            <h4>Date from</h4>
            <input type="date" class="form-control" id="datefilterfrom" data-date-split-input="true">
        </div>
        <div class="col-md-3">
            <h4>Date to</h4>
          <input type="date" class="form-control" id="datefilterto" data-date-split-input="true">
        </div>
        </div>
<table id="testTable" class="table" border="1">
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>18/07/2018</td>
    <td>nothing</td>
  </tr>
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>19/07/2018</td>
    <td>nothing</td>
  </tr>
  <tr>
    <td>nothing</td>
    <td>nothing</td>
    <td>20/07/2018</td>
    <td>nothing</td>
  </tr>
</table>

感谢您的帮助.

推荐答案

请检查是否可以

function filterRows() {
  var from = $('#datefilterfrom').val();
  var to = $('#datefilterto').val();

  if (!from && !to) { // no value for from and to
    return;
  }

  from = from || '1970-01-01'; // default from to a old date if it is not set
  to = to || '2999-12-31';

  var dateFrom = moment(from);
  var dateTo = moment(to);

  $('#testTable tr').each(function(i, tr) {
    var val = $(tr).find("td:nth-child(3)").text();
    var dateVal = moment(val, "DD/MM/YYYY");
    var visible = (dateVal.isBetween(dateFrom, dateTo, null, [])) ? "" : "none"; // [] for inclusive
    $(tr).css('display', visible);
  });
}

$('#datefilterfrom').on("change", filterRows);
$('#datefilterto').on("change", filterRows);

https://jsfiddle.net/oajc94hf/38/

这篇关于将表格中的日期从过滤到的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！