Question

我目前在我的桌子上有这个过滤器

  (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。

修改更新的答案和更正的时间。

表Javascript的日期范围

1 个答案: