DateTime

Import

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

Formats

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 option | Result | | ----------------- | ------------------------- | | full | 12 Aug 2020 at 8:00 AM | | fullWithSeconds | 12 Aug 2020 at 8:00:00 AM | | day | 12 Aug 2020 | | time | 8:00 AM | | weekday | Wed, 12 Aug |

Examples

Passing a Timestamp as an ISOString

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

Passing a JS Date

function JSDateExample() {
  return <DateTime date={new Date()} />;
}

Passing a Unix Epoch in milliseconds

function UnixEpochExample() {
  return <DateTime date={1629240300000} />;
}

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.