Date Formatting

Locale-appropriate date presentation.

html

<div class="datf" data-year="2026" data-month="3" data-day="14" data-locale="en-US" data-long="true">
  <p class="datf__label">new Intl.DateTimeFormat(&quot;en-US&quot;)</p>
  <p class="datf__value">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".datf");
  if (!el) return;
  var d = new Date(Number(el.dataset.year), Number(el.dataset.month) - 1, Number(el.dataset.day));
  var long = el.dataset.long === "true";
  var fmt = new Intl.DateTimeFormat(el.dataset.locale, { dateStyle: long ? "full" : "short" });
  el.querySelector(".datf__value").textContent = fmt.format(d);
})();</script>
<style>
.datf { font: 14px/1.5 system-ui, sans-serif; color: #241430; background: #FAF7F2; padding: 20px; border-radius: 12px; width: 300px; box-sizing: border-box; }
.datf__label { margin: 0 0 12px; font: 11px ui-monospace, monospace; color: #24143099; }
.datf__value { margin: 0; font-size: 22px; font-weight: 800; }
</style>

tailwind

<div class="datftw font-sans text-[#241430] bg-[#FAF7F2] p-5 rounded-xl w-[300px] box-border" data-year="2026" data-month="3" data-day="14" data-locale="en-US" data-long="true">
  <p class="m-0 mb-3 font-mono text-[11px] text-[#24143099]">new Intl.DateTimeFormat(&quot;en-US&quot;)</p>
  <p class="datftw__value m-0 text-2xl font-extrabold">&nbsp;</p>
</div>
<script>(function () {
  var el = document.querySelector(".datftw");
  if (!el) return;
  var d = new Date(Number(el.dataset.year), Number(el.dataset.month) - 1, Number(el.dataset.day));
  var long = el.dataset.long === "true";
  var fmt = new Intl.DateTimeFormat(el.dataset.locale, { dateStyle: long ? "full" : "short" });
  el.querySelector(".datftw__value").textContent = fmt.format(d);
})();</script>

react

import { useMemo } from "react";

export function DateFormatting({
  year = 2026,
  month = 3,
  day = 14,
  locale = "en-US",
  longFormat = true,
}) {
  const value = useMemo(() => {
    const d = new Date(year, month - 1, day);
    return new Intl.DateTimeFormat(locale, { dateStyle: longFormat ? "full" : "short" }).format(d);
  }, [year, month, day, locale, longFormat]);
  return (
    <div style={{ font: "14px/1.5 system-ui, sans-serif", color: "#241430", background: "#FAF7F2", padding: 20, borderRadius: 12, width: 300, boxSizing: "border-box" }}>
      <p style={{ margin: "0 0 12px", fontFamily: "ui-monospace, monospace", fontSize: 11, color: "#24143099" }}>new Intl.DateTimeFormat("{locale}")</p>
      <p style={{ margin: 0, fontSize: 22, fontWeight: 800 }}>{value}</p>
    </div>
  );
}