This is version 4 beta of Forma 36Go back to last stable version 3
Forma 36

RelativeDateTime

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

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

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.

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.

Props of RelativeDateTime

NameRequiredDefaultTypeDescription
daterequired
string
number
Date
The date that will be displayed. It accepts a JS Date, an ISO8601 Timestamp string, or Unix Epoch Milliseconds number
baseDate"Now"
string
number
Date
If a value is passed to baseDate, then the component will compare both dates and return the time between them. If no value is passed then the date will be compared to "now"
isRelativeToCurrentWeekfalse
false
true
Sets the date to be relative only if it is in the current week
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-relative-date-timestringA [data-test-id] attribute used for testing purposes