如何按大于 Material Table 的日期过滤？

Question

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

这是我到目前为止所管理的，它按确切日期过滤，我需要过滤所有 >= table.

中的当前值的值

 <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 组件的情况下解决了这个问题，因为 material table 已经在设置字段 type:date 时内置了日期选择器。

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

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}
/>

如何按大于 Material Table 的日期过滤？

How to filter by date greater than in Material Table?

javascript

datepicker

reactjs

material-ui

material-table