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.

http://localhost:3000

Live previews only work with the latest documentation.

import {
  List,
  Table,
  useTable,
  DateField,
} from '@pankod/refine-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

It also accepts all props of Ant Design Text.