Date utilities

The @contentful/f36-datetime package provides a couple of functions to format a date.

Import

import {
formatDateAndTime,
formatMachineReadableDateTime,
formatRelativeDateTime,
} from '@contentful/f36-components';
// or
import {
formatDateAndTime,
formatMachineReadableDateTime,
formatRelativeDateTime,
} from '@contentful/f36-datetime';

formatDateAndTime

This function will return a formatted string of any date that is passed as the first argument of the function. It allows 4 different formats that can be chosen by passing one of the format options as a second argument of the function:

format optionResult
full12 Aug 2020 at 8:00 AM
fullWithSeconds12 Aug 2020 at 8:00:00 AM
day12 Aug 2020
time8:00 AM
weekdayWed, 12 Aug

If no format is passed to the function, it will return a string with the full format

Examples

Different formats

formatMachineReadableDateTime

This function will return a machine-readable date string that should be passed to the datetime attribute of a <time> tag. It allows four different formats that can be chosen by passing one of the format options as a second argument to the function:

format optionResult
full2019-08-24T15:44:00.000Z
day2019-08-24
time15:44:07.000
weekday08-24

If no format is passed to the function, it will return a string with the full format

Examples

Different formats

formatRelativeDateTime

This function will return a relative date string such as "in a day", "in one month", or "one month ago" when comparing the given date to "now" or to the optional base date.

Examples