Date formatters, currency, phone, task display helpers — live examples
| Input | formatRelativeTime | formatDateTime | formatShortDate |
|---|---|---|---|
| 1 minute ago | 1m | Jul 3, 7:32 PM | Jul 3 |
| 3 hours ago | 3h | Jul 3, 4:33 PM | Jul 3 |
| 2 days ago | 2d | Jul 1, 7:33 PM | Jul 1 |
| 10 days ago | 1w | Jun 23, 7:33 PM | Jun 23 |
| 6 weeks ago | 1mo | May 22, 7:33 PM | May 22 |
formatFullDate adds the year: Jun 23, 2026, 07:33 PM
taskAgeReturns a { label, color } pair — a compact age label with a
traffic-light oklch color (green=fresh, blue=recent, amber=aging, orange/red=stale).
Prefer <TaskTypeIcon type="bug" /> — it renders an SVG that inherits currentColor and avoids emoji cross-OS drift.
formatCurrency| Input | formatPhoneNumber (US, masked) | formatPhoneForDisplay (E.164 → readable) |
|---|---|---|
5615551234 | (561) 555-1234 | (561) 555-1234 |
2125550100 | (212) 555-0100 | (212) 555-0100 |
8005551234 | (800) 555-1234 | (800) 555-1234 |
formatPhoneNumber is a US-only helper. For international numbers use formatPhoneForDisplay (E.164 input → human-readable display).
| Export | Signature | Description |
|---|---|---|
formatRelativeTime | (date) → string | Compact relative: "3h", "2d", "4w", "6mo" |
formatDateTime | (date) → string | "Jan 5, 2:30 PM" (no year) |
formatFullDate | (date) → string | "Jan 5, 2025, 02:30 PM" |
formatShortDate | (date) → string | "Jan 5" |
taskAge | (isoString) → { label, color } | Traffic-light label+color pair |
statusColor | (status) → string | DaisyUI badge class for task status |
statusLabel | (status) → string | "in_progress" → "In Progress" |
priorityColor | (priority) → string | Tailwind text class for priority |
typeIcon | (type) → string | Emoji icon — deprecated, use TaskTypeIcon |
formatCurrency | (amount) → string | "$1,234.56" (USD) |
formatPhoneNumber | (digits) → string | US phone mask: "(561) 555-1234" |
formatPhoneForDisplay | (e164) → string | E.164 → human-readable |