Components / Formatting / DateTime

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayoutForms
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Formatting
CurrencyDateTimeDistance
Hooks
useBreakpointuseFielduseFormuseScrollBlockingOverlayuseStorageuseClickAway
Utilities
formatCurrencyformatDateTimeformatDistance
Components / Formatting / DateTime
DateTimeDateTime should be used whenever a date is rendered.
It uses small-date
(new tab)
 under the hood.
PropsName
Type
Default
Description
children
instanceOf, string
Date.now()
The value that should be formatted
format
string
dd MMMM yyyy
The formatting pattern
locale
sv-SE
sv-SE
The locale used to format
timeZone
Europe/Stockholm
Europe/Stockholm
The time zone from which the date is related
Examples
Dark Mode
Open in Playroom
<Box space={2}>
  <DateTime>{Date.now()}</DateTime>
  <DateTime format="dd-MM-yyyy">{new Date(2021, 1, 15)}</DateTime>
</Box><Box space={2}>
  <DateTime>{Date.now()}</DateTime>
  <DateTime format="dd-MM-yyyy">{new Date(2021, 1, 15)}</DateTime>
</Box>
Nested Text
Dark Mode
Open in Playroom
<Text variant="ash">
  <DateTime>{Date.now()}</DateTime>
</Text><Text variant="ash">
  <DateTime>{Date.now()}</DateTime>
</Text>
Table of Contents
Props
Examples
Nested Text

Name	Type	Default	Description
children	instanceOf, string	Date.now()	The value that should be formatted
format	string	dd MMMM yyyy	The formatting pattern
locale	sv-SE	sv-SE	The locale used to format
timeZone	Europe/Stockholm	Europe/Stockholm	The time zone from which the date is related