RelativeDateTime

RelativeDateTime

Provides a relative date string for resolutions ranging from seconds up through years. Should be used when absolute date and time is unnecessarily specific.

Examples

If we consider today as of August 18th of 2021 and we pass the following values to the <RelativeDateTime /> component

Hide code
<Stack flexDirection="column">
  {/* passing a Timestamp as an ISOString */}
  <RelativeDateTime date="2021-08-17T15:45" />
  {/* passing a JS Date */}
  <RelativeDateTime date={new Date()} />
  {/* passing a Unix Epoch in milliseconds */}
  <RelativeDateTime date={1629240300000} />
</Stack>
<Stack flexDirection="column">
  {/* passing a Timestamp as an ISOString */}
  <RelativeDateTime date="2021-08-17T15:45" />
  {/* passing a JS Date */}
  <RelativeDateTime date={new Date()} />
  {/* passing a Unix Epoch in milliseconds */}
  <RelativeDateTime date={1629240300000} />
</Stack>

The component will display a day ago

Passing a baseDate

Normally, the component compares your date with today’s date. If you want to compare it to some specific date you need to provide baseDate prop.

Hide code
<RelativeDateTime baseDate="2021-08-17T15:45" date="2021-08-18T15:45" />
<RelativeDateTime baseDate="2021-08-17T15:45" date="2021-08-18T15:45" />

The component will display in a day

Using isRelativeToCurrentWeek

You can set isRelativeToCurrentWeek to true if you want to indicate that the date is relative only within a week. And if the difference is more than one week, just show the date without relativeness. It will compare the date to today or baseDate if provided.

Hide code
<Stack flexDirection="column">
  {/* It will display "Yesterday at 3:45 PM" */}
  <RelativeDateTime date="2021-08-17T15:45" isRelativeToCurrentWeek />
  {/* It will display "5 hours ago" */}
  <RelativeDateTime date="2021-08-18T10:45" isRelativeToCurrentWeek />
  {/* It will display "Tomorrow at 3:45 PM" */}
  <RelativeDateTime date="2021-08-19T15:45" isRelativeToCurrentWeek />
  {/* It will display "1 Aug 2021" */}
  <RelativeDateTime date="2021-08-01T15:45" isRelativeToCurrentWeek />
</Stack>
<Stack flexDirection="column">
  {/* It will display "Yesterday at 3:45 PM" */}
  <RelativeDateTime date="2021-08-17T15:45" isRelativeToCurrentWeek />
  {/* It will display "5 hours ago" */}
  <RelativeDateTime date="2021-08-18T10:45" isRelativeToCurrentWeek />
  {/* It will display "Tomorrow at 3:45 PM" */}
  <RelativeDateTime date="2021-08-19T15:45" isRelativeToCurrentWeek />
  {/* It will display "1 Aug 2021" */}
  <RelativeDateTime date="2021-08-01T15:45" isRelativeToCurrentWeek />
</Stack>

Props of RelativeDateTime