Date field doc (refinedev#603)

* date field doc * boolean doc fix * add link to format prop * add IPost interface for createdAt * interface IPost added and fix table key prop Co-authored-by: Ömer Faruk APLAK <[email protected]>
landofcoder · Jun 16, 2021 · e04ad93 · e04ad93
1 parent ca55485
commit e04ad93
Show file tree

Hide file tree

Showing 5 changed files with 67 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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