# Format Date

> Source: https://design.nanatec.co.ke/components/format-date/
> Formats a date with `Intl` — relative ("2 days ago"), short/medium/long absolute, or ISO.

Formats a date with `Intl` — relative ("2 days ago"), short/medium/long absolute, or ISO.

## Preview

```html
<nana-format-date date="2026-07-18" month="long" day="numeric" year="numeric"></nana-format-date>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/format-date";
```

## Basic usage

```html
<nana-format-date date="2026-07-18" month="long" day="numeric" year="numeric"></nana-format-date>
```

## Formats

```html
<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>
```

## API

## Related components

<ul class="related not-content">
  <li><a href="/components/format-number/">Format Number</a></li>
  <li><a href="/components/format-bytes/">Format Bytes</a></li>
  <li><a href="/components/relative-time/">Relative Time</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-format-date--docs