FormattedDate

A versatile date formatting component that displays dates in various human-readable formats. Supports localization and customization options to fit different regional date styles. Ideal for enhancing user experience by presenting dates clearly and consistently across your Astro projects.

Install

pnpm dlx hybrid-astro-ui@latest add formatted-date

npx hybrid-astro-ui@latest add formatted-date

yarn dlx hybrid-astro-ui@latest add formatted-date

bunx hybrid-astro-ui@latest add formatted-date

Import

Use the component export:

---
import { FormattedDate } from "@/src/components/hybrid-astro-ui/formatted-date";
---
 <div class="flex flex-col gap-2 text-sm">
    <div class="flex items-center gap-2">
      <span class="text-muted-foreground">Basic:</span>
      <FormattedDate date={new Date("2025-12-22T15:30:00Z")} locale="en-US" />
    </div>

    <div class="flex items-center gap-2">
      <span class="text-muted-foreground">Long + time:</span>
      <FormattedDate date="2025-12-22T15:30:00Z" locale="en-GB" format="long" showTime />
    </div>

    <div class="flex items-center gap-2">
      <span class="text-muted-foreground">UTC:</span>
      <FormattedDate date="2025-12-22T15:30:00Z" locale="en-GB" timeZone="UTC" showTime />
    </div>

    <div class="flex items-center gap-2">
      <span class="text-muted-foreground">Invalid date fallback:</span>
      <FormattedDate date="not-a-date" fallback="Date unavailable" />
    </div>
</div>

What it renders

This component renders a native HTML time element.

• When the date is valid, it sets datetime to an ISO string.
• When the date is invalid, it renders the fallback and omits datetime.

Usage examples (real-world)

1) Blog post meta (published date)

---
import { FormattedDate } from "@/src/components/hybrid-astro-ui/formatted-date";

const publishedAt = new Date("2025-12-22T15:30:00Z");
---

<p class="text-sm text-muted-foreground">
  Published <FormattedDate date={publishedAt} locale="en-US" />
</p>

2) CMS/frontmatter string (ISO) + show time

---
import { FormattedDate } from "@/src/components/hybrid-astro-ui/formatted-date";

const updatedAt = "2025-12-22T18:45:00Z";
---

<p class="text-sm">
  Last updated: <FormattedDate date={updatedAt} locale="en-GB" format="long" showTime />
</p>

3) Timestamp number (ms)

---
import { FormattedDate } from "@/src/components/hybrid-astro-ui/formatted-date";

const createdAtMs = Date.now() - 1000 * 60 * 35;
---

<span class="text-xs text-muted-foreground">
  <FormattedDate date={createdAtMs} locale="en-US" format="medium" showTime />
</span>

4) Force a specific timezone (UTC)

Useful for changelogs, releases, or anything where you want a consistent timezone.

---
import { FormattedDate } from "@/src/components/hybrid-astro-ui/formatted-date";

const releasedAt = "2025-12-22T00:00:00Z";
---

<p>
  Release date (UTC):
  <FormattedDate date={releasedAt} locale="en-GB" timeZone="UTC" showTime />
</p>

5) Custom Intl formatting (advanced)

Use options to fully control the output. This overrides the default formatting and also overrides format if provided.

---
import { FormattedDate } from "@/src/components/hybrid-astro-ui/formatted-date";

const d = "2025-12-22T12:05:00Z";
---

<FormattedDate
  date={d}
  locale="en-US"
  showTime
  options={{ weekday: "short", month: "long", hour12: true }}
/>

6) Defensive UI (invalid date)

---
import { FormattedDate } from "@/src/components/hybrid-astro-ui/formatted-date";

const maybeBadDate = "not-a-date";
---

<FormattedDate date={maybeBadDate} fallback="Date unavailable" />

Props