BaseDate Component Demo

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

Sample Dates

Current Time: 2025-11-15T23:35:39.659Z
UTC Test Date: 2024-01-15T14:30:00.000Z
One Hour Ago: 2025-11-15T22:35:39.659Z
Yesterday: 2025-11-14T23:35:39.659Z

Basic Usage

Default Formatting

23:35

Custom Format

2025-11-15 23:35:39

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 (22:35)

Shows both formats for recent dates

Old (Absolute Only)

Nov 15, 2023

Shows absolute format for older dates

Timezone Support

New York

2025-11-15 18:35 z

London

2025-11-15 23:35 z

Tokyo

2025-11-16 08:35 z

Smart Formatting

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

Today (Time Only)

23:35

This Year

Sep 15, 23:35

Different Year

Nov 15, 2023

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