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

DateTime

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

DateTime

The DateTime component will format any date to a human friendly format and wrap it in a <time> tag. It allows four different forms of display that can be controlled by changing the format prop:

format optionResult
full12 Aug 2020 at 8:00 AM
day12 Aug 2020
time8:00 AM
weekdayWed, 12 Aug

Examples

All the usages above will result in 'Tue, 17 Aug 2021 at 3:45 PM'

Props of DateTime

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
formatfullDateFormatThe format in which the date will be presented
classNamestringCSS class to be appended to the root element
styleCSSPropertiesAccepts a JavaScript object with camelCased properties rather than a CSS string
testIdcf-ui-date-timestringA [data-test-id] attribute used for testing purposes