Skip to content

Commit c755cd7

Browse files
committed
[doc] add information on showing only the time in DateField
1 parent 67c361b commit c755cd7

File tree

1 file changed

+12
-3
lines changed

1 file changed

+12
-3
lines changed

docs/DateField.md

+12-3
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ title: "The DateField Component"
55

66
# `<DateField>`
77

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

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

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

2628
## Usage
2729

28-
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.
30+
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.
2931

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

42+
<DateField source="publication_date" showTime showDate={false} />
43+
// renders the record { id: 1234, publication_date: new Date('2017-04-23 23:05') } as
44+
<span>11:05:00 PM</span>
45+
46+
<DateField source="publication_date" showTime={false} showDate={false} />
47+
// throws an error as nothing would be displayed
48+
4049
<DateField source="publication_date" options={{ weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }} />
4150
// renders the record { id: 1234, publication_date: new Date('2017-04-23') } as
4251
<span>Sunday, April 23, 2017</span>

0 commit comments

Comments
 (0)