Question

我正在尝试在我的React表中实现一个日期范围过滤器。当我更改开始日期或结束日期时，它会触发过滤器功能，创建最小和最大日期，但是完成时，将不过滤任何日期，并且所选日期的输入为空。这是我的代码：

    const setTime = setInterval(time, 1000);
    const event = new Date();
    const time = () => {
        return event.toLocaleTimeString('fa-IR');
    };

过滤页面：

const ChartData = () => {
const columns = React.useMemo(
() => [
  {
    Header: "Date",
    columns: [
      {
        Header: "Date",
        accessor: "date",
        id: "date",
        Filter: chartFilter.DateRangeColumnFilter,
        filter: "between"
      }
    ]
  }
],
[]
);

const data = React.useMemo(() => dummyData(100000), []);

return (
   <div className={classes.tableWrapper}>
      <Table columns={columns} data={data} />
   </div>
 );
};
export default ChartData;

我在这里缺少什么？

Answer 1

所以我遇到了同样的麻烦这是我的解决方法

我曾经用过flatpickr，

DateFilter.tsx

export const DateFilter = ({
  column: {
    filterValue,
    setFilter,
    preFilteredRows,
    id,
  },
  rows
}: any) => {
  const dates = preFilteredRows.map((val: any) => moment(val.original[id],dateFormat))
  const minDate = moment.min(dates).subtract(1,'day') // To include the date
  const maxDate = moment.max(dates).add(1, 'day') 
  return (
    <React.Fragment>
      <Flatpickr
        className='form-control'
        onChange={(date) => {
          if (date.length === 2) {
            setFilter([date[0],date[1]])
          }
        }}
        options={{
          enable: [
            {
              from: minDate.toDate(),
              to : maxDate.toDate()
            }
          ],
          mode : 'range'
        }}
      />

  </React.Fragment>

）; };

现在取消您的mainTable组件文件。添加一个称为filtertypes的常量。这是对象

      const filterTypes : any = {
        date: (rows: any[], id: any, filterValue: any) => {
          let start = moment(filterValue[0]).subtract(1, 'day')
          let end = moment(filterValue[1]).add(1, 'day')
          return rows.filter(val => 
           moment(val.original[id],dateFormat).isBetween(start, end);
          )
        }
}

别忘了在列定义中添加过滤器和过滤器属性

反应表日期范围过滤器

1 个答案: