components

DateTime (beta) (code)

Allows you to display a date in a consistent way through the use of formats.

12/09/2023 at 08:11

import { DateTime } from '@mediahuis/chameleon-react'

<DateTime date={new Date().toISOString()} />

<DateTime date={new Date().toISOString()} />

Props

Name	Type	Default	Required	Description
className	String	-	-	Extend classNames.
date	String	-	-	Timestamp string (ISO8601) of the date to be displayed.
format	String	dateTimeFormatDefault	-	Date and time formatting setting. Uses dayjs under the hood.

System Props

color

fontWeight, fontStyle, textAlign, fontFamily, decoration, textTransform

m, mb, ml, mr, mt, mx, my

position, bottom, left, right, top, zIndex

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

Date

default: undefined

Timestamp string of the date to be displayed. Provide this in the ISO8601 format that is understood by the native Date object.

12/09/2023 at 08:11

import { DateTime } from '@mediahuis/chameleon-react'

<DateTime date={new Date().toISOString()} />

<DateTime date={new Date().toISOString()} />

Format

default: dateTimeFormatDefault

Date and time formatting setting. Refer to the dayjs docs for all available settings.

On top of the dayjs formats, you can also supply "relative". Under the hood this uses dayjs' RelativeTime plugin.

Each brand has a few tokens which contain some default formats.

12/09/2023 at 08:11

12/09/2023

08:11

Tue 12 Sep 2023 at 08:11

a day ago

import { dateTimeFormatDefault, dateTimeFormatDate, dateTimeFormatTime, dateTimeFormatDateTime } from '@mediahuis/chameleon-theme-wl'

import { DateTime } from '@mediahuis/chameleon-react'

<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatDefault} />
</Box>
<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatDate} />
</Box>
<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatTime} />
</Box>
<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatDateTime} />
</Box>
<Box p={5}>
  <DateTime date={new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString()} format="relative" />
</Box>

<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatDefault} />
</Box>
<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatDate} />
</Box>
<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatTime} />
</Box>
<Box p={5}>
  <DateTime date={new Date().toISOString()} format={dateTimeFormatDateTime} />
</Box>
<Box p={5}>
  <DateTime date={new Date(Date.now() - 1000 * 60 * 60 * 24).toISOString()} format="relative" />
</Box>