[英]How to change the filtered date format in material table react?
In material table react, I have the following columns:在材料表反应中,我有以下列:
columns={[
{
title: 'Name',
field: 'name',
type: 'string',
},
{
title: 'Age',
field: 'age',
type: 'string',
},
{
title: 'DOB',
field: 'birthDate',
type: 'date',
dateSetting: {
format: 'dd/MM/yyyy'
},
}
]}
When I try to filter the date column it shows filtered date as, for example, February 24th , but instead I want the date to be like dd/MM/yyyy format.当我尝试过滤日期列时,它显示过滤日期,例如February 24th ,但我希望日期类似于dd/MM/yyyy格式。
How can I change the value.我怎样才能改变价值。 I already tried giving dateSetting, but it does not work on filter.
我已经尝试提供 dateSetting,但它不适用于过滤器。 Thank You.
谢谢你。
You could achieve that by defining your own filterComponent
.您可以通过定义自己的
filterComponent
来实现。 Here is a working example I made based on this solution :这是我基于此解决方案制作的一个工作示例:
First, you need to create the component to be used as a filter, in my case I used KeyboardDatePicker
from material-ui/pickers , but could it be anything you need:首先,您需要创建用作过滤器的组件,在我的例子中,我使用了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>
);
};
The key aspect is to call the onFilterChanged
function that is passed via props
.关键方面是调用通过
props
传递的onFilterChanged
function 。
Then, on your column definition just implement your component, like this:然后,在您的列定义上,只需实现您的组件,如下所示:
const tableColumns = [
{ title: "Client", field: "id" },
{ title: "Name", field: "name" },
{
title: "Date",
field: "date",
type: "date",
dateSetting: { locale: "en-GB" },
filterComponent: (props) => <CustomDatePicker {...props} />
}
];
Full code and sandbox here .完整的代码和沙箱在这里。 Hope that works for you!
希望对你有用!
how to set min date in title type date?如何在标题类型日期中设置最小日期?
import "date-fns";
import DateFnsUtils from "@date-io/date-fns";
import {
MuiPickersUtilsProvider,
KeyboardDatePicker
} from "@material-ui/pickers";
import React, { useState } from "react";
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>
);
};
export default CustomDatePicker;
and和
import React, { Fragment, useState } from "react";
import MaterialTable from "material-table";
import CustomDatePicker from "./customDatePicker";
const originalData = [
{
id: "client 1",
name: "Anna",
date: new Date("2021-03-01T20:11:54")
},
{
id: "client 2",
name: "Tom",
date: new Date("2020-03-30T11:01:54")
},
{
id: "client 3",
name: "Deb",
date: new Date("2021-02-28T21:11:54")
}
];
export default function CustomEditComponent(props) {
const [data, setData] = useState(originalData);
const tableColumns = [
{ title: "Client", field: "id" },
{ title: "Name", field: "name" },
{
title: "Date",
field: "date",
type: "date",
dateSetting: { locale: "en-GB" },
filterComponent: (props) => <CustomDatePicker {...props} />
}
];
return (
<Fragment>
<MaterialTable
columns={tableColumns}
data={data}
title="Material Table - Custom Filter Component"
options={{ search: false, filtering: true }}
editable={{
onRowAdd: (newData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
setData([...data, newData]);
resolve();
}, 1000);
}),
onRowUpdate: (newData, oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
console.log("old:", oldData);
console.log("new:", newData);
const dataUpdate = [...data];
const index = oldData.tableData.id;
dataUpdate[index] = newData;
setData([...dataUpdate]);
resolve();
}, 1000);
}),
onRowDelete: (oldData) =>
new Promise((resolve, reject) => {
setTimeout(() => {
const dataDelete = [...data];
const index = oldData.tableData.id;
dataDelete.splice(index, 1);
setData([...dataDelete]);
resolve();
}, 1000);
})
}}
/>
</Fragment>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.