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

import React from 'react';
import { DateTime } from '@contentful/forma-36-react-components';
export const MyComponent: React.FC<{ date: Date }> = ({ date }) => (
<DateTime date={date} />
);

or with a different format

import React from 'react';
import { DateTime } from '@contentful/forma-36-react-components';
export const ScheduledForWeekdate: React.FC<{ date: Date }> = ({ date }) => (
<DateTime date={date} format="WEEKDAY_DATE" />
);

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

import React from 'react';
import { RelativeDate } from '@contentful/forma-36-react-components';
export const EntryPublishedRelative: React.FC<{ publishedAt: Date }> = ({
publishedAt,
}) => <RelativeDate date={publishedAt} />;

With a different baseDate

import React from 'react';
import { RelativeDate } from '@contentful/forma-36-react-components';
export const EntryLifetime: React.FC<{
createdAt: Date;
publishedAt: Date;
}> = ({ createdAt, publishedAt }) => (
<RelativeDate date={publishedAt} baseDate={createdAt} />
);

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

import { datetime } from '@contentful/forma-36-react-components';
const publishedTime = datetime.formatTime(date);