Date

Formats and displays dates and times in human-readable styles.

Default:

June 13, 2025

Short:

6/13/25

Time:

12:00 PM

Full:

Friday, June 13, 2025

Long:

June 13, 2025

Long with time:

June 13, 2025, 12:00 PM

1
---
2
import { Date } from '@bejamas/ui/components/date';
3
import { Separator } from '@bejamas/ui/components/separator';
4
---
5

6
<div class="grid grid-cols-2 gap-4">
7
  <div>Default:</div> <Date date="2025-06-13T12:00:00Z" />
8
  <Separator class="col-span-2" />
9
  <div>Short:</div> <Date date="2025-06-13T12:00:00Z" format="short" />
10
  <Separator class="col-span-2" />
11
  <div>Time:</div> <Date date="2025-06-13T12:00:00Z" format="time" />
12
  <Separator class="col-span-2" />
13
  <div>Full:</div> <Date date="2025-06-13T12:00:00Z" format="full" />
14
  <Separator class="col-span-2" />
15
  <div>Long:</div> <Date date="2025-06-13T12:00:00Z" format="long" />
16
  <Separator class="col-span-2" />
17
  <div>Long with time:</div> <Date date="2025-06-13T12:00:00Z" format="long" includeTime />
18
</div>

Installation

bunx bejamas add date

npx bejamas add date

pnpm dlx bejamas add date

yarn dlx bejamas add date

Usage

1
---
2
import { Date } from '@bejamas/ui/components/date';
3
---
4

5
<Date date="2025-06-24T12:00:00Z" />

Examples

Custom locale

24 juin 202524. Juni 202524 de junio de 202524 czerwca 2025

1
---
2
import { Date } from '@bejamas/ui/components/date';
3
---
4

5
<div class="flex gap-2 flex-col">
6
  <Date date="2025-06-24T12:00:00Z" locale="fr-FR" />
7
  <Date date="2025-06-24T12:00:00Z" locale="de-DE" />
8
  <Date date="2025-06-24T12:00:00Z" locale="es-ES" />
9
  <Date date="2025-06-24T12:00:00Z" locale="pl-PL" />
10
</div>