Newskit Logo
About

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.
paddingInlineMQ<string>
It can take one space token to specify the logical inline start and end padding of the container. This space token can also be used on breakpoints.
paddingInlineStartMQ<string>
It can take one space token to specify the logical inline start padding of the container. This space token can also be used on breakpoints.
paddingInlineEndMQ<string>
It can take one space token to specify the logical inline end padding of the container. This space token can also be used on breakpoints.
paddingBlockMQ<string>
It can take one space token to specify the logical block start and end padding of the container. This space token can also be used on breakpoints.
paddingBlockStartMQ<string>
It can take one space token to specify the logical block start padding of the container. This space token can also be used on breakpoints.
paddingBlockEndMQ<string>
It can take one space token to specify the logical block end padding of the container. This space token can also be used on breakpoints.
marginInlineMQ<string>
It can take one space token to specify the logical inline start and end margin of the container. This space token can also be used on breakpoints.
marginInlineStartMQ<string>
It can take one space token to specify the logical inline start margin of the container. This space token can also be used on breakpoints.
marginInlineEndMQ<string>
It can take one space token to specify the logical inline end margin of the container. This space token can also be used on breakpoints.
marginBlockMQ<string>
It can take one space token to specify the logical block start and end margin of the container. This space token can also be used on breakpoints.
marginBlockStartMQ<string>
It can take one space token to specify the logical block start margin of the container. This space token can also be used on breakpoints.
marginBlockEndMQ<string>
It can take one space token to specify the logical block end margin of the container. This space token can also be used on breakpoints.
Refer to the defaults below for the object structure:

An error occurred loading this code example.

Playground

Date Time StylePreset
Date Time TypographyPreset
Prefix StylePreset
Prefix TypographyPreset
Suffix StylePreset
Suffix TypographyPreset
1import React from 'react';
2import { DateTime } from 'newskit';
3
4export default () => (
5  <DateTime
6    date="2017-07-01T14:32:00.000Z"
7    dateFormat="MMMM d yyyy, h:mmaaaaa'm'"
8    prefix="Updated: "
9    suffix="The Times"
10    overrides={{ prefix: {}, suffix: {} }}
11  />
12);
13

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.