Skip to main content
Version: 4.xx.xx
Swizzle Ready

Date

This field is used to display dates. It uses Day.js to display date format.

Good to know:

You can swizzle this component with the Refine CLI to customize it.

Usage

Let's see how we can use <DateField> with the example in the post list:

localhost:3000/posts
import {
useDataGrid,
List,
DateField,
} from "@refinedev/mui";
import { DataGrid, GridColDef } from "@mui/x-data-grid";

const columns: GridColDef[] = [
{ field: "id", headerName: "ID", type: "number" },
{ field: "title", headerName: "Title", minWidth: 100, flex: 1 },
{
field: "createdAt",
headerName: "Created At",
renderCell: function render({ row }) {
return <DateField format="LLL" value={row.createdAt} />;
},
minWidth: 100,
flex: 1,
},
];

const PostsList: React.FC = () => {
const { dataGridProps } = useDataGrid<IPost>();

return (
<List>
<DataGrid {...dataGridProps} columns={columns} autoHeight />
</List>
);
};

interface IPost {
id: number;
title: string;
createdAt: string;
}

API Reference

Properties

PropertyTypeDescriptionDefault
value

string | number | Date | Dayjs | null | undefined

The value of the field.

locales

string

The locales of the date. By default, Day.js comes with English locale only. If you need other locales, you can load them on demand. Refer to loading locales

English

format

string

Gets the formatted date according to the string of the tokens passed in.

L

External Props:

It also accepts all props of Material UI Typography.