RelativeTime

RelativeTime displays time in a way that is clear, concise, and accessible.

Page navigation navigation

This component's features all come from the relative-time-element (GitHub staff only) custom element.

React examples

Default

Jan 2, 2020

<RelativeTime date={new Date('2020-01-02T00:00:00Z')} />

<RelativeTime date={new Date('2020-01-02T00:00:00Z')} />

With time

Jan 2, 2020

<RelativeTime second="numeric" minute="numeric" hour="numeric" date={new Date('2020-01-02T01:02:03Z')} />

<RelativeTime second="numeric" minute="numeric" hour="numeric" date={new Date('2020-01-02T01:02:03Z')} />

With leading zeros

Number formatting guidelines

Jan 2, 2020

<RelativeTime day="2-digit" second="2-digit" minute="2-digit" hour="2-digit" date={new Date('2020-01-02T01:02:03Z')} />

<RelativeTime day="2-digit" second="2-digit" minute="2-digit" hour="2-digit" date={new Date('2020-01-02T01:02:03Z')} />

Without "on" prefix

Word formatting guidelines

Jan 2, 2020

<RelativeTime date={new Date('2020-01-02T01:02:03Z')} prefix="" />

<RelativeTime date={new Date('2020-01-02T01:02:03Z')} prefix="" />

Micro format

Jan 2, 2020

<RelativeTime format="micro" date={new Date('2020-01-02T01:02:03Z')} />

<RelativeTime format="micro" date={new Date('2020-01-02T01:02:03Z')} />

Without a title attribute

Jan 2, 2020

<RelativeTime date={new Date('2020-01-02T01:02:03Z')} noTitle={true} />

<RelativeTime date={new Date('2020-01-02T01:02:03Z')} noTitle={true} />

Jan 2, 2020

<Tooltip text={new Date('2020-01-02T01:02:03Z').toString()}>
  <Link href="#">
    <RelativeTime date={new Date('2020-01-02T01:02:03Z')} noTitle={true} />
  </Link>
</Tooltip>

<Tooltip text={new Date('2020-01-02T01:02:03Z').toString()}>
  <Link href="#">
    <RelativeTime date={new Date('2020-01-02T01:02:03Z')} noTitle={true} />
  </Link>
</Tooltip>

Props

Loading data for relative_time...