New release
Introducing a visual refresh to Forma 36 React componentsRelease notes
Forma 36

DateTime

StorybookGithub
stable

Dates and Times

Provides components for displaying dates and times while following the Forma 36 guidelines.

React Components

DateTime

Displays an absolute date and/or time in a variety of formats that conforms to Forma 36 guidelines.

Format CodeExample
FULL12 Aug 2020 at 8:00 am
DATE_ONLY12 Aug 2020
TIME_ONLY8:00 am
WEEKDAY_DATEWed, 12 Aug

Example Usage

SyntaxError: Unexpected token (1:15)
1 : return (import React from 'react';
                   ^

or with a different format

SyntaxError: Unexpected token (1:15)
1 : return (import React from 'react';
                   ^

RelativeDate

Provides a relative date string for resolutions ranging from seconds up through years. Should be used when absolute date and time is unnecessarily specific.

NOTE: The component includes a setInterval that will automatically trigger a re-render on a per-second basis to keep the value accurate over time.

Example Usage

SyntaxError: Unexpected token (1:15)
1 : return (import React from 'react';
                   ^

With a different baseDate

SyntaxError: Unexpected token (1:15)
1 : return (import React from 'react';
                   ^

Utility Functions

Additional functions are available for strings in cases when the date and/or time needs to be embedded in plaintext.

MethodDescription
formatDateTimeGiven a JS date and an optional format returns a string matching the format. Defaults to FULL
formatDateGiven a JS date returns only the date portion as a string
formatTimeGiven a JS date returns only the time portion as a string
formatWeekdayDateGiven a JS date returns the date portion prefixed with the 3 letter weekday
formatRelativeDateTimeGiven a JS date and an optional baseDate calculates the relative time difference

NOTE formatRelativeDateTime returns a static string, meaning you will need to trigger a re-render if the relative time is to stay accurate for near-term times. <RelativeDate /> does this for you automatically.

Example

SyntaxError: Unexpected token (1:15)
1 : return (import { datetime } from '@contentful/forma36-react-components';
                   ^