Relative Time

Auto-updating relative time display with long, short, and narrow formats.

<rhx-relative-time>

Examples

Long (Default)

just now 5 minutes ago 3 hours ago 1 day ago 2 weeks ago 2 months ago

<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddSeconds(-3)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddMinutes(-5)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddHours(-3)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-1)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-14)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-60)" />

Future

in a moment in 9 minutes in 1 hour in 2 days

<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddSeconds(3)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddMinutes(10)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddHours(2)" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(3)" />

Short

5m ago in 1h 3d ago

<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddMinutes(-5)"
                   rhx-format="short" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddHours(2)"
                   rhx-format="short" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-3)"
                   rhx-format="short" />

Narrow

5m 1h 1mo

<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddMinutes(-5)"
                   rhx-format="narrow" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddHours(2)"
                   rhx-format="narrow" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-45)"
                   rhx-format="narrow" />

Auto Numeric

yesterday in 23 hours last week last year

<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-1)"
                   rhx-numeric="auto" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(1)"
                   rhx-numeric="auto" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-7)"
                   rhx-numeric="auto" />
<rhx-relative-time rhx-date="@DateTimeOffset.UtcNow.AddDays(-365)"
                   rhx-numeric="auto" />

Properties

Property	Type	Default	Description
`rhx-date`	`DateTimeOffset`	`-`	The date/time to display relative to now
`rhx-format`	`string`	`long`	Format style: long, short, narrow
`rhx-numeric`	`string`	`always`	Numeric mode: always, auto