#FormatDateTime

Prints a timestamp the way the house date guide says to: relative by default for anything recent, date when only the day matters, datetime when the exact moment does. Relative stops being relative as a date ages — past roughly five months it prints the day and month, past a year it adds the year — and it always carries the full absolute time, timezone included, in a tooltip.

Source · Storybook

#Usage

import { FormatDateTime } from '@wallarm-org/design-system/FormatDateTime';
import { HStack, VStack } from '@wallarm-org/design-system/Stack';

#Examples

#Date format

format='date' drops the time — and drops the year too when the date falls in the current one, which is why only the 2025 row carries it.

#Datetime format

format='datetime' shows both, the time in secondary type with its timezone, and no tooltip: there is nothing left to reveal.

#Datetime layout

stacked is the default and the table-cell shape; inline puts date and time on one baseline for a row that cannot grow to two lines.

#With description

When, and then who or what — the second line is composed from Text rather than being a prop, so it can say anything the row needs.

#Null value

null and undefined both come out as an em dash rather than an empty cell, with 'No data' behind it on hover.

#Future date

A timestamp five minutes ahead reads Just now rather than counting forwards — the component absorbs clock skew between a browser and a server instead of showing it.

#Date order and hour cycle

The component respects the app's date order from DateFormatProvider. Day-first (the default) prints "11 Feb, 2026"; month-first prints "Feb 11, 2026". Both hour cycles are shown: 24-hour and 12-hour with AM/PM.

#Props