DateTime

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.

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.

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