NewsKit Mobile Logo

Date Time

Overview

The DateTime component is a styled HTML5 time element for displaying dates, usually publication dates on news articles. You provide a date/time and the desired format setting for displaying the date. Date parsing is handled by the native Date object. Date formatting is powered by the date-fns library.

Props

datestring | number
Timestamp string of the date to be displayed. Provide this in the ISO8601 format that is understood by the native Date object.
dateFormatstring
Date and time formatting setting. Refer to the date-fns docs for all available settings.
prefixstring
Adds the provided string before the date.
suffixstring
Adds the provided string after the date.
overridesobject
If provided, overrides the respective presets for the component and provided elements.
stylePresetMQ<string>
If provided, this overrides the style preset of the date-time.
typographyPresetMQ<string>
If provided, this overrides the typography preset of the datetime.
prefixobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the prefix.
typographyPresetMQ<string>
If provided, this overrides the typography preset of the prefix.
suffixobject
stylePresetMQ<string>
If provided, this overrides the style preset applied to the suffix.
typographyPresetMQ<string>
If provided, this overrides the typography preset of the suffix.
Refer to the defaults below for the object structure:
{
  stylePreset: "inkSubtle",
  typographyPreset: "utilityMeta020",
  prefix: {
    stylePreset: "inkSubtle",
    typographyPreset: "utilityMeta020"
  },
  suffix: {
    stylePreset: "inkSubtle",
    typographyPreset: "utilityMeta020"
  }
}

Playground

Props
Date Time StylePreset
Date Time TypographyPreset
Prefix StylePreset
Prefix TypographyPreset
Suffix StylePreset
Suffix TypographyPreset
import React from 'react';
import { DateTime } from 'newskit';

export default () => (
  <DateTime
    date="2017-07-01T14:32:00.000Z"
    dateFormat="MMMM d yyyy, h:mmaaaaa'm'"
    prefix="Updated: "
    suffix="The Times"
    overrides={{ prefix: {}, suffix: {} }}
  />
);

For more information on overriding component defaults, see the docs here.

Rationale

Styling

The DateTime was designed to be discreet as it's intended to supplement the primary content.

Accessibility

The DateTime component is wrapped in a time HTML5 element and the provided date prop is passed into its datetime attribute to make the displayed date fully accessible.

Colour

Text and background colours must have a 3:1 minimum contrast ratio. Hover states should have clear contrast change or should include a non colour designator.