NEW
Forma 36 v4 is availableClick here to go to the new version
Forma 36
v3.100.4

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);