DateTime

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:

Import

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

Examples

Passing a Timestamp as an ISOString

Open in Playground
function ISOStringExample() {
  return <DateTime date="2021-08-17T15:45" />;
}
function ISOStringExample() {
  return <DateTime date="2021-08-17T15:45" />;
}
Hide source

Passing a JS Date

Open in Playground
function JSDateExample() {
  return <DateTime date={new Date()} />;
}
function JSDateExample() {
  return <DateTime date={new Date()} />;
}
Hide source

Passing a Unix Epoch in milliseconds

Open in Playground
function UnixEpochExample() {
  return <DateTime date={1629240300000} />;
}
function UnixEpochExample() {
  return <DateTime date={1629240300000} />;
}
Hide source

Props (API reference)

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.