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

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
fullWithSeconds12 Aug 2020 at 8:00:00 AM
day12 Aug 2020
time8:00 AM
weekdayWed, 12 Aug

Import

import { DateTime } from '@contentful/f36-components';
// or
import { DateTime } from '@contentful/f36-datetime';

Examples

Passing a Timestamp as an ISOString

Passing a JS Date

Passing a Unix Epoch in milliseconds

Props (API reference)

Open in Storybook

Content guidelines

  • full should be displayed without commas and as human-readable as possible.
  • weekday should be used when it's helpful for users to see weekdays.
  • Dates should be displayed in order of day-month-year, with month abbreviated and without punctuation, to increase scannability and to strike a compromise between different localized date formats.
  • To show a date or time range, use an en dash (Unicode: U+2013, html: ) with spaces around it (e.g. 8:00 am – 2:00 pm, 8 Jul – 13 Aug 2019).

Accessibility

The component uses the time tag that provides a machine readable date.