如何更改物料表中的过滤日期格式？

debugcn 发表于 Dev

开发人员

在物料表反应中，我有以下几列：

columns={[
            {
              title: 'Name',
              field: 'name',
              type: 'string',
            },
            {
              title: 'Age',
              field: 'age',
              type: 'string',
            },
            {
              title: 'DOB',
              field: 'birthDate',
              type: 'date',
              dateSetting: {
                format: 'dd/MM/yyyy'
              },
            }
         ]}

当我尝试过滤日期列时，它显示的是过滤后的日期，例如2月24日，但是我希望该日期类似于dd / MM / yyyy格式。

如何更改值。我已经尝试过提供dateSetting，但是它不适用于过滤器。谢谢你。

尼可

您可以通过定义自己的实现filterComponent。这是我根据此解决方案制作的一个工作示例：

首先，您需要创建要用作过滤器的组件，在我的情况下，我是KeyboardDatePicker从material-ui / pickers中使用的，但可以是您需要的任何东西：


const CustomDatePicker = (props) => {
  const [date, setDate] = useState(null);

  return (
    <MuiPickersUtilsProvider utils={DateFnsUtils}>
      <KeyboardDatePicker
        margin="normal"
        id="date-picker-dialog"
        label="Date picker"
        format="dd/MM/yyyy"
        clearable
        value={date}
        onChange={(event) => {
          console.log("Date picker value: ", event);
          console.log(props.columnDef.tableData.id);

          setDate(event);
          props.onFilterChanged(props.columnDef.tableData.id, event);
        }}
        KeyboardButtonProps={{
          "aria-label": "change date"
        }}
      />
    </MuiPickersUtilsProvider>
  );
};

关键方面是调用onFilterChanged通过传递的函数props。

然后，在列定义中仅实现您的组件，如下所示：

 const tableColumns = [
    { title: "Client", field: "id" },
    { title: "Name", field: "name" },

    {
      title: "Date",
      field: "date",
      type: "date",
      dateSetting: { locale: "en-GB" },
      filterComponent: (props) => <CustomDatePicker {...props} />
    }
  ];

完整的代码和沙箱在这里。希望对您有用！

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。