Skip to content

Date

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

Default:
Short:
Time:
Full:
Long:
Long with time:
---
import { Date } from '@bejamas/ui/components/date';
import { Separator } from '@bejamas/ui/components/separator';
---
<div class="grid grid-cols-2 gap-4">
<div>Default:</div> <Date date="2025-06-13T12:00:00Z" />
<Separator class="col-span-2" />
<div>Short:</div> <Date date="2025-06-13T12:00:00Z" format="short" />
<Separator class="col-span-2" />
<div>Time:</div> <Date date="2025-06-13T12:00:00Z" format="time" />
<Separator class="col-span-2" />
<div>Full:</div> <Date date="2025-06-13T12:00:00Z" format="full" />
<Separator class="col-span-2" />
<div>Long:</div> <Date date="2025-06-13T12:00:00Z" format="long" />
<Separator class="col-span-2" />
<div>Long with time:</div> <Date date="2025-06-13T12:00:00Z" format="long" includeTime />
</div>
Terminal window
bunx bejamas add date
---
import { Date } from '@bejamas/ui/components/date';
---
<Date date="2025-06-24T12:00:00Z" />
---
import { Date } from '@bejamas/ui/components/date';
---
<div class="flex gap-2 flex-col">
<Date date="2025-06-24T12:00:00Z" locale="fr-FR" />
<Date date="2025-06-24T12:00:00Z" locale="de-DE" />
<Date date="2025-06-24T12:00:00Z" locale="es-ES" />
<Date date="2025-06-24T12:00:00Z" locale="pl-PL" />
</div>