BaseDate Component Demo

Showcasing timezone handling, UTC conversion, and user-friendly date formatting

Sample Dates

Current Time: 2026-07-26T13:46:50.281Z
UTC Test Date: 2024-01-15T14:30:00.000Z
One Hour Ago: 2026-07-26T12:46:50.281Z
Yesterday: 2026-07-25T13:46:50.281Z

Basic Usage

Default Formatting

13:46

Custom Format

2026-07-26 13:46:50

UTC Conversion

UTC Date (Raw)

Jan 15, 2024

Treated as local time

UTC → Local

Jan 15, 2024

Converted to local timezone

Keep UTC

Jan 15, 2024

Displayed in UTC

Relative Time

Current Time

a few seconds ago

One Hour Ago

an hour ago

Yesterday

a day ago

Hybrid Mode

Recent (Relative + Absolute)

an hour ago (12:46)

Shows both formats for recent dates

Old (Absolute Only)

Jul 26, 2024

Shows absolute format for older dates

Timezone Support

New York

2026-07-26 09:46 z

London

2026-07-26 14:46 z

Tokyo

2026-07-26 22:46 z

Smart Formatting

Smart formatting automatically chooses the best format based on how recent the date is

Today (Time Only)

13:46

This Year

May 26, 13:46

Different Year

Jul 26, 2024

Slot Usage (Renderless)

Custom Rendering

an hour ago Live

Status Indicator

Last seen a few seconds ago

Locale Support

English

an hour ago

Slovak

an hour ago

Color-Coded by Recency

The component automatically applies colors based on how recent the date is when using relative mode

Very Recent (< 1 hour)

a few seconds ago

Green color

Recent (< 24 hours)

an hour ago

Primary color

Older (> 24 hours)

a day ago

Tertiary color