DateTimeText

Installation

Package

@bigbang/ui

Import

import { DateTimeText } from '@bigbang/ui';

Source

DateTimeText.tsx

Storybook

DateTimeText · Playground

DateTimeText is in the @bigbang/ui package.

import { DateTimeText } from '@bigbang/ui';

<DateTimeText value="2026-10-08T14:30:00" />;
<DateTimeText value={updatedAt} format="relative" />;

relativeParts(date, now), which picks the relative unit, is exported too.

Props

valueRequired

Description

An ISO 8601 date ("2026-10-08") or date-time, a Date or epoch milliseconds.

Type

string | number | Date

format

Description

auto writes a plain date as a date and anything else as a date and time; relative writes "2 saat önce" or "2 hours ago".

Type

'auto' | 'date' | 'datetime' | 'time' | 'relative'

Default

'auto'

dateStyle

Description

Length of the date: short (08.10.2026), medium (8 Eki 2026), long (8 Ekim 2026) or full.

Type

'short' | 'medium' | 'long' | 'full'

Default

'medium'

timeStyle

Description

medium adds seconds.

Type

'short' | 'medium'

Default

'short'

timeZone

Description

IANA time zone the time is written in, such as "Europe/Istanbul". Without it, the browser's.

Type

string

now

Description

The time relative values count from. Without it, the current time, refreshed every 30 seconds.

Type

Date

className

Description

Added to the root element; use it for layout only.

Type

string

Data attributes

• data-component="date-time-text".