如何更改物料表反应中的过滤日期格式?
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 在数据透视表中的两个日期之间进行过滤。英国到美国的日期格式问题