diff --git a/documentation/docs/guides-and-concepts/fields/boolean.md b/documentation/docs/guides-and-concepts/fields/boolean.md
index 9a3d25ae976f..5a823da1ea26 100644
--- a/documentation/docs/guides-and-concepts/fields/boolean.md
+++ b/documentation/docs/guides-and-concepts/fields/boolean.md
@@ -14,14 +14,15 @@ This field is used to display boolean values and uses `<Tooltip>` values from An
 Let's see how to use `<BooleanField>` with the example in the post list.
 
 ```tsx
+//highlight-next-line 
 import { List, Table, BooleanField, Icons } from "@pankod/refine";
 
-export const PostList: React.FC = (props) => {
+export const PostList: React.FC = () => {
     const { CloseCircleOutlined, CheckCircleOutlined } = Icons;
 
     return (
-        <List {...props}>
-            <Table key="id">
+        <List>
+            <Table rowKey="id">
                 //highlight-next-line
                 ...
                 <Table.Column
@@ -48,7 +49,7 @@ export const PostList: React.FC = (props) => {
 
 <br/>
 <div>
-    <img src={booleanField} alt="Aside Usage"/>
+    <img src={booleanField} alt="BooleanField Usage"/>
 </div>
 
 
diff --git a/documentation/docs/guides-and-concepts/fields/date.md b/documentation/docs/guides-and-concepts/fields/date.md
new file mode 100644
index 000000000000..85191a75c512
--- /dev/null
+++ b/documentation/docs/guides-and-concepts/fields/date.md
@@ -0,0 +1,60 @@
+---
+id: date
+title: Date
+---
+
+import dateField from '@site/static/img/guides-and-concepts/fields/date/dateField.png'
+
+This field is used to display dates and uses [`Day.js`](https://day.js.org/docs/en/display/format) to display date format.
+
+## Usage
+
+Let's see how to use `<DateField>` with the example in the post list.
+
+```tsx
+//highlight-next-line
+import { List, Table, DateField } from "@pankod/refine";
+
+import { IPost } from "interfaces";
+
+export const PostList: React.FC = () => {
+
+    return (
+        <List>
+            <Table rowKey="id">
+                //highlight-next-line ...
+                <Table.Column<IPost>
+                    dataIndex="createdAt"
+                    title="Created At"
+                    key="createdAt"
+                    render={(value) => (
+                        //highlight-next-line
+                        <DateField format="LLL" value={value} />
+                    )}
+                />
+            </Table>
+        </List>
+    );
+};
+```
+
+```ts title="interfaces/index.d.ts"
+export interface IPost {   
+    id: string;    
+    createdAt: string;
+}
+```
+
+<br/>
+<div>
+    <img src={dateField} alt="DateField Usage"/>
+</div>
+
+## API Reference
+
+### Properties
+
+| Property                                            | Description                                                         | Type                                            | Default |
+| --------------------------------------------------- | ------------------------------------------------------------------- | ----------------------------------------------- | ------- |
+| value <div className="required">Required</div>      | Date value                                                          | `string` \| `number` \| `Date` \| `dayjs.Dayjs` |         |
+| [format](https://day.js.org/docs/en/display/format) | Get the formatted date according to the string of tokens passed in. | `string` \| `undefined`                         | `"L"`   |
diff --git a/documentation/docs/guides-and-concepts/fields/email.md b/documentation/docs/guides-and-concepts/fields/email.md
index 78facf652af1..9e5e4ca6d1e3 100644
--- a/documentation/docs/guides-and-concepts/fields/email.md
+++ b/documentation/docs/guides-and-concepts/fields/email.md
@@ -20,7 +20,7 @@ export const UserList: React.FC = () => {
 
     return (
         <List>
-            <Table key="id">
+            <Table rowKey="id">
                 //highlight-next-line
                 ...
                  <Table.Column
diff --git a/documentation/sidebars.js b/documentation/sidebars.js
index 2e2b93edd3f9..92be6b7a3d89 100644
--- a/documentation/sidebars.js
+++ b/documentation/sidebars.js
@@ -143,6 +143,7 @@ module.exports = {
                     label: "Fields",
                     items: [
                         "guides-and-concepts/fields/boolean",
+                        "guides-and-concepts/fields/date",
                         "guides-and-concepts/fields/email",
                         "guides-and-concepts/fields/markdown",
                         "guides-and-concepts/fields/boolean",
diff --git a/documentation/static/img/guides-and-concepts/fields/date/dateField.png b/documentation/static/img/guides-and-concepts/fields/date/dateField.png
new file mode 100644
index 000000000000..f75f5980584e
Binary files /dev/null and b/documentation/static/img/guides-and-concepts/fields/date/dateField.png differ