Skip to main content
🧙‍♂️ refine grants your wishes! Please give us a ⭐️ on GitHub to keep the magic going.
Version: 4.xx.xx
Swizzle Ready

Date

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.

localhost:3000/posts
import {
List,
DateField,
} from "@refinedev/chakra-ui";
import {
TableContainer,
Table,
Thead,
Tr,
Th,
Tbody,
Td,
} from "@chakra-ui/react";
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 } = useTable({
columns,
});

return (
<List>
<TableContainer>
<Table variant="simple" whiteSpace="pre-line">
<Thead>
{getHeaderGroups().map((headerGroup) => (
<Tr key={headerGroup.id}>
{headerGroup.headers.map((header) => {
return (
<Th key={header.id}>
{!header.isPlaceholder &&
flexRender(
header.column.columnDef
.header,
header.getContext(),
)}
</Th>
);
})}
</Tr>
))}
</Thead>
<Tbody>
{getRowModel().rows.map((row) => {
return (
<Tr key={row.id}>
{row.getVisibleCells().map((cell) => {
return (
<Td key={cell.id}>
{flexRender(
cell.column.columnDef.cell,
cell.getContext(),
)}
</Td>
);
})}
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
</List>
);
};

API Reference

Properties

External Props

It also accepts all props of Chakra UI's Text component.