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';
                   ^