DateDisplay
Formatted dates with multiple format options and relative time support. Accepts Date objects, ISO strings, or timestamps.
Installation
typescript
import { DateDisplay } from '@happyvertical/smrt-svelte';Basic Usage
Display dates in medium format (default).
svelte
<DateDisplay date={new Date()} />Format Options
Available format styles.
Short:
Medium:
Long:
Relative:
svelte
<DateDisplay date={date} format="short" />
<DateDisplay date={date} format="medium" />
<DateDisplay date={date} format="long" />
<DateDisplay date={date} format="relative" />Relative Time
Human-readable relative time display.
Yesterday:
Last week:
Next week:
svelte
<DateDisplay date={yesterday} format="relative" />
<DateDisplay date={lastWeek} format="relative" />
<DateDisplay date={nextWeek} format="relative" />With Time
Include time in the display.
Short with time:
Medium with time:
svelte
<DateDisplay date={date} showTime />Input Formats
Accepts various date input formats.
Date object:
ISO string:
Timestamp:
svelte
<!-- Date object -->
<DateDisplay date={new Date()} />
<!-- ISO string -->
<DateDisplay date="2025-01-15" />
<!-- Timestamp -->
<DateDisplay date={1705276800000} />Null Handling
Display fallback text when date is null or undefined.
Default: N/A
Custom: Not set
svelte
<DateDisplay date={null} />
<DateDisplay date={null} fallback="Not set" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
date * | Date | string | number | null | undefined | - | Date to display (Date, ISO string, or timestamp) |
format | 'short' | 'medium' | 'long' | 'relative' | 'medium' | Display format |
fallback | string | 'N/A' | Text shown when date is null/undefined |
showTime | boolean | false | Show time along with date |
locale | string | 'en-CA' | Locale for formatting |
TypeScript
typescript
import { DateDisplay } from '@happyvertical/smrt-svelte';
interface Props {
date: Date | string | number | null | undefined;
format?: 'short' | 'medium' | 'long' | 'relative';
fallback?: string;
showTime?: boolean;
locale?: string;
}