Skip to content
Domain-Specific

DateDisplay

client48 kB
@stellaria/nebula-webDateDisplayProps

Preview

Props

11
PropTypeDefault

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.

number604_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.

booleantrue

Also accepts

On top of its own props, this component forwards these groups.

Style props · 128