如何更改物料表反应中的过滤日期格式?

Posted

技术标签:

【中文标题】如何更改物料表反应中的过滤日期格式?【英文标题】:How to change the filtered date format in material table react? 【发布时间】:2021-05-28 19:05:09 【问题描述】:

在材料表反应中,我有以下列:

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,但它不适用于过滤器。 谢谢。

【问题讨论】:

【参考方案1】:

您可以通过定义自己的filterComponent 来实现这一点。这是我基于solution 制作的一个工作示例:

首先,您需要创建用作过滤器的组件,在我的例子中,我使用了 material-ui/pickers 中的KeyboardDatePicker,但它可以是您需要的任何东西吗:


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>
  );
;

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

然后,在你的列定义上实现你的组件,像这样:

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

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

完整代码和沙盒here。希望对你有用!

【讨论】:

以上是关于如何更改物料表反应中的过滤日期格式?的主要内容,如果未能解决你的问题,请参考以下文章

使用 VBA 在数据透视表中的两个日期之间进行过滤。英国到美国的日期格式问题

如何更改 Oracle BI Publisher 中的日期格式?

KendoUI 网格过滤器日期格式

如何更改 PostgreSQL 中的日期样式?

DB2日期格式更改的方法

如何更改excel中的默认日期格式