首页 > 解决方案 > 在没有任何库的 React 表上实现日期范围过滤器

问题描述

我目前正在尝试在不使用任何外部库的情况下为现有表实现日期范围过滤器。我浏览了 stackOverflow 和许多其他网站,但找不到与我的问题相关的任何解决方案,因为这些表中的大多数都使用来自其他库的数据表或表。我希望找到一种实时过滤日期的方法,这是我目前拥有的,但它不起作用。

每个日期的输入字段:

      <form className="date-range">
      <input
      type="date"
      onInput={(event) => {
        setDateInput1(event.target.value);
      }}>
      </input>
      <p>to</p>
      <input
      type="date"
      onInput={(event) => {
        setDateInput2(event.target.value);
      }}>
      </input>
      <button type="reset">clear date</button>
    </form>

(我正在使用使用状态来设置 dataInput1 和 dataInput2)

用于过滤的代码:

{allDetails
          .filter((item) => {
            if (searchTerm == "") {
              return item;
            } else if (
              item[1].Name.toLowerCase().includes(
                searchTerm.toLocaleLowerCase()
              )
            )
            if(dateInput1==""&&dateInput2==""){
              return item;
            } else if(
              item[1].InitialContactDate.includes(dateInput1>=item[1].InitialContactDate<=dateInput2)
            )
             {
              return item;
            }
          })

尝试过滤 InitialDate 字段的位(item[1].InitialDate):

          item[1].InitialContactDate.includes(dateInput1>=item[1].InitialContactDate<=dateInput2)

在此位之后,它将映射到表中。我也在为名称使用条件实时渲染,它可以工作。但是对于日期它不起作用。我可能错过了什么,或者我的逻辑是错误的。任何帮助将不胜感激!

标签: node.jsreactjsdatefilter

解决方案


推荐阅读