Skip to content

Commit

Permalink
[doc] add information on showing only the time in DateField
Browse files Browse the repository at this point in the history
  • Loading branch information
arnaudvergnet committed Aug 23, 2022
1 parent fe119ef commit 1776d10
Showing 1 changed file with 12 additions and 3 deletions.
15 changes: 12 additions & 3 deletions docs/DateField.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ title: "The DateField Component"

# `<DateField>`

Displays a date or datetime using the browser locale (thanks to `Date.toLocaleDateString()` and `Date.toLocaleString()`).
Displays a date, datetime or time using the browser locale (thanks to `Date.toLocaleDateString()`, `Date.toLocaleString()` and `Date.toLocaleTimeString()`).

```jsx
import { DateField } from 'react-admin';
Expand All @@ -19,13 +19,15 @@ import { DateField } from 'react-admin';
| ---------- | -------- | ------- | ------- | -------------------------------------------------------------------------------------------------------- |
| `locales` | Optional | string | '' | Override the browser locale in the date formatting. Passed as first argument to `Intl.DateTimeFormat()`. |
| `options` | Optional | Object | - | Date formatting options. Passed as second argument to `Intl.DateTimeFormat()`. |
| `showTime` | Optional | boolean | `false` | If true, show date and time. If false, show only date |
| `showTime` | Optional | boolean | `false` | If true, show the time |
| `showDate` | Optional | boolean | `true` | If true, show the date |


`<DateField>` also accepts the [common field props](./Fields.md#common-field-props).

## Usage

This component accepts a `showTime` attribute (`false` by default) to force the display of time in addition to date. It uses `Intl.DateTimeFormat()` if available, passing the `locales` and `options` props as arguments. If Intl is not available, it ignores the `locales` and `options` props.
This component accepts `showTime` and `showDate` props to decide whether to display a date (`showTime=false` and `showDate=true`), a datetime (`showTime=true` and `showDate=true`) or time (`showTime=true` and `showDate=false`). Setting `showTime` and `showDate` to false at the same time will throw and error. It uses `Intl.DateTimeFormat()` if available, passing the `locales` and `options` props as arguments. If Intl is not available, it ignores the `locales` and `options` props.

{% raw %}
```jsx
Expand All @@ -37,6 +39,13 @@ This component accepts a `showTime` attribute (`false` by default) to force the
// renders the record { id: 1234, publication_date: new Date('2017-04-23 23:05') } as
<span>4/23/2017, 11:05:00 PM</span>

<DateField source="publication_date" showTime showDate={false} />
// renders the record { id: 1234, publication_date: new Date('2017-04-23 23:05') } as
<span>11:05:00 PM</span>

<DateField source="publication_date" showTime={false} showDate={false} />
// throws an error as nothing would be displayed

<DateField source="publication_date" options={{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }} />
// renders the record { id: 1234, publication_date: new Date('2017-04-23') } as
<span>Sunday, April 23, 2017</span>
Expand Down

0 comments on commit 1776d10

Please sign in to comment.