Date

Preview

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

Source

---
import Date from '@bejamas/ui/components/Date.astro';
import Separator from '@bejamas/ui/components/Separator.astro';
---

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

Installation

CLI

bun

 bunx bejamas add date

npm

 npx bejamas add date

pnpm

 pnpm dlx bejamas add date

yarn

 yarn dlx bejamas add date

Manual

---
/**
 * @component Date
 * @description Formats and displays dates and times in human-readable styles.
 *
 * @preview
 *
 * <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>
 *
 * @usage
 *
 * ```astro
 * ---
 * import Date from '@/ui/components/Date.astro';
 * ---
 *
 * <Date date="2025-06-24T12:00:00Z" />
 * ```
 *
 * @examples
 *
 * ### Custom locale
 *
 * <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>
 */
const {
  date,
  format = "long",
  includeTime = false,
  locale = "en-US",
  class: className = "",
  ...props
} = Astro.props;

// Helper: parse date input
function parseDate(input) {
  if (!input) return null;
  if (input instanceof Date) return input;
  // Try to parse string
  const d = new Date(input);
  return isNaN(d.getTime()) ? null : d;
}

const parsedDate = parseDate(date);

// Precompute separate date and time strings to support custom rendering via slot
let dateText = "";
let timeText = "";
let formatted = "";
let html = "";
if (parsedDate) {
  let dateOptions;
  switch (format) {
    case "short":
      dateOptions = { dateStyle: "short" };
      break;
    case "full":
      dateOptions = { dateStyle: "full" };
      break;
    case "time":
      dateOptions = undefined;
      break;
    case "long":
    default:
      dateOptions = { dateStyle: "long" };
      break;
  }
  if (dateOptions) {
    dateText = new Intl.DateTimeFormat(locale, dateOptions).format(parsedDate);
  }
  if (includeTime || format === "time") {
    timeText = new Intl.DateTimeFormat(locale, { timeStyle: "short" }).format(
      parsedDate,
    );
  }
  formatted =
    format === "time"
      ? timeText
      : includeTime && timeText
        ? `${dateText}, ${timeText}`
        : dateText;

  if (Astro.slots.has("default")) {
    html = await Astro.slots.render("default", [
      {
        date: dateText,
        time: timeText,
        formatted,
        iso: parsedDate.toISOString(),
        dateObj: parsedDate,
      },
    ]);
  }
}
---

{
  parsedDate ? (
    Astro.slots.has("default") ? (
      <Fragment set:html={html} />
    ) : (
      <time dateTime={parsedDate.toISOString()} class={className} {...props}>
        {formatted}
      </time>
    )
  ) : (
    <span class={["text-destructive", className].join(" ")} {...props}>
      Invalid date
    </span>
  )
}

Usage

---
import Date from '@bejamas/ui/components/Date.astro';
---

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

Examples

Custom locale

Preview

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

Source

---
import Date from '@bejamas/ui/components/Date.astro';
---

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