RelativeDateTime

In @contentful/f36-datetime, there are two components (DateTime and RelativeDateTime) that will return a date.

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

<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>
Hide source

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.

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

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.

<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>
Hide source

Props of RelativeDateTime