javascript - 如何按大于 Material 表中的日期过滤？

Question

如何在Material表中按大于当前值的日期过滤？

这是我目前所管理的，它按确切日期过滤，我需要过滤所有 >= 表中当前值的值。

 <TableMaterial
    title=""
    columns={[  
    { title: `${t('description')}`, field: 'description' },
    {title: `${t('due_date')}`, field: 'due_date', type: 'date', align: 'center',
       filterComponent: (props) => <CustomDatePicker {...props} />}
    }]
     data={allData}
    />

这是 CustomDatePicker

const CustomDatePicker = (props) => {
  const [date, setDate] = useState(null);
  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        id="date-picker-dialog"
        format="dd/MM/yyyy"
        clearable
        value={date}
        onChange={(event) => {
          setDate(event);
          props.onFilterChanged(props.columnDef.tableData.id, event);
        }}
        KeyboardButtonProps={{
          "aria-label": "change date"
        }}
      />
    </MuiPickersUtilsProvider>
  );
};

感谢任何帮助。谢谢!

Answer 1

我设法在没有 CustomDatePicker 组件的情况下解决了这个问题，因为在设置字段 type:date 时， Material 表已经内置在日期选择器中。

所以只需要函数并在 Material 表中调用它:

const handleDateFilter = (term, rowData) => {
  return new Date(term).setHours(0, 0, 0, 0) <= new Date(rowData.due_date)
    ? true
    : false;
};

<TableMaterial
  title=""
  columns={[
    { title: `${t("description")}`, field: "description" },
    {
      title: `${t("due_date")}`,
      field: "due_date",
      type: "date",
      align: "center",
      customFilterAndSearch: (term, rowData) => handleDateFilter(term, rowData),
    },
  ]}
  data={allData}
/>