Date

This field is used to display dates. It uses the 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,
    useTable,
    DateField,
} from "@refinedev/antd";
import { Table } from "antd";

const PostList: React.FC = () => {
    const { tableProps } = useTable<IPost>();

    return (
        <List>
            <Table {...tableProps} rowKey="id">
                <Table.Column dataIndex="id" title="ID" />
                <Table.Column dataIndex="title" title="Title" width="50%" />
                <Table.Column
                    dataIndex="createdAt"
                    title="Created At"
                    render={(value) => (
                        <DateField value={value} />
                    )}
                    width="50%"
                />
            </Table>
        </List>
    );
};

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

API Reference

Properties

External Props

This field also accepts all props of Ant Design's Text component.

Usage​

API Reference​

Properties​

Usage

API Reference

Properties