javascript - 表 Javascript 的日期范围

Question

我的 table 上目前有这个过滤器

  (function(document) {
    'use strict';

    var LightTableFilter = (function(Arr) {

      var _input;

      function _onInputEvent(e) {
        _input = e.target;
        var tables = document.getElementsByClassName(_input.getAttribute('data-table'));
        Arr.forEach.call(tables, function(table) {
          Arr.forEach.call(table.tBodies, function(tbody) {
            Arr.forEach.call(tbody.rows, _filter);
          });
        });
      }

      function _filter(row) {
        var text = row.textContent.toLowerCase(), val = _input.value.toLowerCase();
        row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';
      }

      return {
        init: function() {
          var inputs = document.getElementsByClassName('light-table-filter');
          Arr.forEach.call(inputs, function(input) {
            input.oninput = _onInputEvent;
          });
        }
      };
    })(Array.prototype);

    document.addEventListener('readystatechange', function() {
      if (document.readyState === 'complete') {
        LightTableFilter.init();
      }
    });

  })(document);

我想知道如何使用两个日期字段作为日期范围？我刚刚尝试添加两个日期字段，但这只是给了我两个确切日期的响应，而不是之间的范围

这是我的日期 html 代码

<label for="Date">Date From:</label>
              <input type="date" id="datefrom" class="light-table-filter form-control" style="width:50%" data-table="order-table" placeholder="Filter">
              <label for="Date">Date to:</label>
              <input type="date" id="dateto" class="light-table-filter form-control" style="width:50%" data-table="order-table" placeholder="Filter">

Answer 1

我认为这需要对过滤器功能进行一些扩展，但是您可以使用比较运算符(例如>=)来比较日期和<= .

因此，您需要创建 2 个输入字段的日期和表行值的日期。您需要识别该单元格是否确实是日期单元格，否则它将创建任意单元格值的日期对象。我不知道你的完整 HTML，但这可以通过添加一个类来完成，例如(参见我的代码)。

例如:

function _filter(row) {
      var dateFrom = new Date(document.getElementById('datefrom').value);
      var dateTo = new Date(document.getElementById('dateto').value);

      dateFrom.setHours(0);
      dateTo.setHours(0);

      var text = row.textContent.toLowerCase(),
        val = _input.value.toLowerCase();
      row.style.display = text.indexOf(val) === -1 ? 'none' : 'table-row';

      if  (!isNaN(dateFrom.getTime()) && !isNaN(dateTo.getTime())) {
        var cell = row.querySelectorAll(".date")[0];
        var arr = cell.innerText.split('-');
        var rowDate = new Date(arr[0],parseInt(arr[1])-1,arr[2]);
        if (!isNaN(rowDate.getTime())) {
          if (rowDate >= dateFrom && rowDate <= dateTo) {
            row.style.display = 'table-row';
          } else {
            row.style.display = 'none';
          }
        }
      }
    }

确保Date构造函数接收有效的可解析日期格式。请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date了解更多信息。

编辑 更新了答案并更正了时间。