DateDisplay
@stellaria/nebula-webDateDisplayPropsPreview
Props
11| Prop | Type | Default |
|---|---|---|
className | string | — |
fallback What renders when the value is missing or unparseable. An em dash by default, so an empty cell still holds its line instead of collapsing. | ReactNode | "—" |
locale Overrides the locale. Left out it takes the ambient one from the surrounding React Aria provider, which is what keeps a whole screen formatting alike. | string | — |
mode Absolute, relative, or relative only while recent. `"auto"` is the one that reads best in a feed, and it is the only mode `relativeThreshold` affects. | DateDisplayMode | "absolute" |
now Pins what "now" means for the relative form. Passing it is what makes the output deterministic, which a snapshot test or a server render needs; left out, every render reads the clock. | number | Date | — |
options Merged over the preset, so it wins field by field rather than replacing the format wholesale. It is applied after `timeZone` and can therefore override that too. | Intl.DateTimeFormatOptions | — |
preset Which named format the absolute form takes. Left out it follows the value: a date-only value gets the date preset, anything carrying a time gets date and time. | DateDisplayPreset | — |
relativeThreshold How near, in milliseconds, an instant has to be for `"auto"` to render it relatively. A week by default, past which "5 weeks ago" stops being more useful than the date itself. | number | 604_800_000 |
timeZone Which zone the instant is rendered in. Left out it is the reader's own, so one timestamp shown in two places reads as two different clock times — set it when the wall clock is part of the fact being stated. | string | — |
value The instant to show. A date-only string is detected as such and never gains a time it did not have. Anything unparseable is not an error — it renders `fallback`. | string | number | Date | null | — |
withTitle Puts the absolute form in a `title` while the relative one is showing, so "2 hours ago" can be hovered for the real timestamp. It does nothing when the absolute form is already on screen. | boolean | true |
Also accepts
On top of its own props, this component forwards these groups.