Import
import {formatDateAndTime,formatMachineReadableDateTime,formatRelativeDateTime,} from '@contentful/f36-components';// orimport {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:
| Result |
|---|---|
full | 12 Aug 2020 at 8:00 AM |
fullWithSeconds | 12 Aug 2020 at 8:00:00 AM |
day | 12 Aug 2020 |
time | 8:00 AM |
weekday | Wed, 12 Aug |
If no format is passed to the function, it will return a string with the full format
Examples
function FormatDateAndTimeExample() { return ( <Stack flexDirection="column"> {/* passing a Timestamp as an ISOString */} <Text>{formatDateAndTime('2021-08-17T15:45')}</Text> {/* passing a JS Date */} <Text>{formatDateAndTime(new Date())}</Text> {/* passing a Unix Epoch in milliseconds */} <Text>{formatDateAndTime(1629240300000)}</Text> </Stack> ); }
Different formats
function DifferentFormatsExample() { return ( <Stack flexDirection="column"> {/* With `fullWithSeconds` format */} <Text>{formatDateAndTime('2021-08-17T15:45:34', 'fullWithSeconds')}</Text> {/* With `day` format */} <Text>{formatDateAndTime('2021-08-17T15:45:34', 'day')}</Text> {/* With `time` format */} <Text>{formatDateAndTime('2021-08-17T15:45:34', 'time')}</Text> {/* With `weekday` format */} <Text>{formatDateAndTime('2021-08-17T15:45:34', 'weekday')}</Text> </Stack> ); }
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:
| Result |
|---|---|
full | 2019-08-24T15:44:00.000Z |
day | 2019-08-24 |
time | 15:44:07.000 |
weekday | 08-24 |
If no format is passed to the function, it will return a string with the full format
Examples
function FormatMachineReadableDateTimeExample() { return ( <Stack flexDirection="column"> {/* passing a Timestamp as an ISOString */} <Text>{formatMachineReadableDateTime('2021-08-17T15:45')}</Text> {/* passing a JS Date */} <Text>{formatMachineReadableDateTime(new Date())}</Text> {/* passing a Unix Epoch in milliseconds */} <Text>{formatMachineReadableDateTime(1629240300000)}</Text> </Stack> ); }
Different formats
function DifferentFormatMachineReadableDateTimeExample() { return ( <Stack flexDirection="column"> {/* With `day` format */} <Text>{formatMachineReadableDateTime('2021-08-17T15:45', 'day')}</Text> {/* With `time` format */} <Text>{formatMachineReadableDateTime('2021-08-17T15:45', 'time')}</Text> {/* With `weekday` format */} <Text> {formatMachineReadableDateTime('2021-08-17T15:45', 'weekday')} </Text> </Stack> ); }
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
function FormatRelativeDateTimeExample() { return ( <Stack flexDirection="column"> {/* passing a Date */} <Text>{formatRelativeDateTime('2021-08-17')}</Text> {/* passing a base date to compare to */} <Text>{formatRelativeDateTime('2021-08-17', '2021-08-18')}</Text> </Stack> ); }