Format Date
Formats a date with Intl — relative (“2 days ago”), short/medium/long absolute, or ISO.
Preview
Section titled “Preview”<nana-format-date date="2026-07-18" month="long" day="numeric" year="numeric"></nana-format-date>Installation
Section titled “Installation”npm install @nana-tec/ui-componentsImport
Section titled “Import”import "@nana-tec/ui-components/format-date";Basic usage
Section titled “Basic usage”<nana-format-date date="2026-07-18" month="long" day="numeric" year="numeric"></nana-format-date>Formats
Section titled “Formats”<nana-format-date date="2026-01-01" format="long"></nana-format-date>
<nana-format-date date="2026-01-01" format="medium"></nana-format-date>
<nana-format-date date="2026-01-01" format="short"></nana-format-date>
<nana-format-date date="2026-01-01" format="relative"></nana-format-date>Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
date | — | Date | string | number | new Date() | The date — a `Date`, an ISO string, or a timestamp |
format | — | FormatDateFormat | 'medium' | How to render the date |
locale | — | string | undefined | — | BCP 47 locale (defaults to the document locale) |
Related components
Section titled “Related components”Storybook
Section titled “Storybook” Explore Format Date interactively Every state, prop, and edge case — with live controls — in Storybook.
View in Storybook