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

We can pass a date as either an ISO 8601 string, a Date object, or a UNIX Epoch time.

Hide code
<Stack flexDirection="column">
  {/* passing a timestamp as an ISO string */}
  <RelativeDateTime date="2021-08-17T15:45" />
  {/* passing a JS Date */}
  <RelativeDateTime date={new Date()} />
  {/* passing a UNIX Epoch */}
  <RelativeDateTime date={1629240300000} />
</Stack>
<Stack flexDirection="column">
  {/* passing a timestamp as an ISO string */}
  <RelativeDateTime date="2021-08-17T15:45" />
  {/* passing a JS Date */}
  <RelativeDateTime date={new Date()} />
  {/* passing a UNIX Epoch */}
  <RelativeDateTime date={1629240300000} />
</Stack>

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

Props of RelativeDateTime