This is documentation for Refine 4.xx.xx , which is no longer actively maintained.
Home Docs UI Integrations Material UI Components Fields 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.
Let's see how we can use <DateField> with the example in the post list:
Live previews only work with the latest documentation.
Show Code Hide Code 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" , display : "flex" , 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 } /> </ List > ) ; } ; interface IPost { id : number ; title : string ; createdAt : string ; } API Referenceโ Propertiesโ Property Type Description Default string | number | Date | Dayjs | null | undefined
The value of the field.
locales
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
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 .