表Javascript的日期范围

时间:2015-11-27 10:08:04

标签: javascript date

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

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

1 个答案:

答案 0 :(得分:0)

我认为这需要扩展您的过滤功能,但您可以将比较日期与>=<=等比较运算符进行比较。

因此,您需要创建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

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