BaseDate Component Demo

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

Sample Dates

Current Time: 2025-07-29T00:54:09.470Z
UTC Test Date: 2024-01-15T14:30:00.000Z
One Hour Ago: 2025-07-28T23:54:09.470Z
Yesterday: 2025-07-28T00:54:09.470Z

Basic Usage

Default Formatting

00:54

Custom Format

2025-07-29 00:54:09

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 (Jul 28, 23:54)

Shows both formats for recent dates

Old (Absolute Only)

Jul 29, 2023

Shows absolute format for older dates

Timezone Support

New York

2025-07-28 20:54 z

London

2025-07-29 01:54 z

Tokyo

2025-07-29 09:54 z

Smart Formatting

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

Today (Time Only)

00:54

This Year

May 29, 00:54

Different Year

Jul 29, 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