Date utilities

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

Import

import {
  formatDateAndTime,
  formatMachineReadableDateTime,
} from '@contentful/f36-components';
// or
import {
  formatDateAndTime,
  formatMachineReadableDateTime,
} 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:

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

Examples

Open in Playground
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>
  );
}
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>
  );
}
Hide source

Different formats

Open in Playground
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>
  );
}
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>
  );
}
Hide source

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:

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

Examples

Open in Playground
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>
  );
}
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>
  );
}
Hide source

Different formats

Open in Playground
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>
  );
}
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>
  );
}
Hide source