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

Date

http://localhost:3000
const { default: routerProvider } = LegacyRefineReactRouterV6;
const { default: simpleRest } = RefineSimpleRest;
setRefineProps({
legacyRouterProvider: routerProvider,
dataProvider: simpleRest("https://api.fake-rest.refine.dev"),
notificationProvider: RefineMantine.notificationProvider,
Layout: RefineMantine.Layout,
Sider: () => null,
});

const Wrapper = ({ children }) => {
return (
<MantineCore.MantineProvider
theme={RefineMantine.LightTheme}
withNormalizeCSS
withGlobalStyles
>
<MantineCore.Global
styles={{ body: { WebkitFontSmoothing: "auto" } }}
/>
<MantineNotifications.NotificationsProvider position="top-right">
{children}
</MantineNotifications.NotificationsProvider>
</MantineCore.MantineProvider>
);
};

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

Swizzle

You can swizzle this component to customize it with the refine CLI

Usage

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

http://localhost:3000
import { List, DateField } from "@refinedev/mantine";
import { Table, Pagination } from "@mantine/core";
import { useTable } from "@refinedev/react-table";
import { ColumnDef, flexRender } from "@tanstack/react-table";

const PostList: React.FC = () => {
const columns = React.useMemo<ColumnDef<IPost>[]>(
() => [
{
id: "id",
header: "ID",
accessorKey: "id",
},
{
id: "title",
header: "Title",
accessorKey: "title",
},
{
id: "createdAt",
header: "Created At",
accessorKey: "createdAt",
cell: function render({ getValue }) {
return (
<DateField format="LLL" value={getValue()} />
);
},
},
],
[],
);

const {
getHeaderGroups,
getRowModel,
refineCore: { setCurrent, pageCount, current },
} = useTable({
columns,
});

return (
<List>
<Table>
<thead>
{getHeaderGroups().map((headerGroup) => (
<tr key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<th key={header.id}>
{header.isPlaceholder
? null
: flexRender(
header.column.columnDef.header,
header.getContext(),
)}
</th>
))}
</tr>
))}
</thead>
<tbody>
{getRowModel().rows.map((row) => (
<tr key={row.id}>
{row.getVisibleCells().map((cell) => (
<td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</td>
))}
</tr>
))}
</tbody>
</Table>
<br />
<Pagination
position="right"
total={pageCount}
page={current}
onChange={setCurrent}
/>
</List>
);
};

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

API Reference

Properties

External Props

It also accepts all props of Mantine Text.