useDateFormatter

useDateFormatter is a hook providing localized date for the current locale. It is built around the native Intl.DateTimeFormat API with predefined date formats but can also be used using the same API.

See the MDN docs for full details on how to use the API.

useDateFormatter is built on top of the function dateFormatter. This function can also be used to format a date.

Format Output

	SHORT	MEDIUM	LONG_WITH_TIME	CUSTOM
en-US	12/16/25	Dec 16, 2025	December 16, 2025 at 3:28 PM	12/16
en-UK	16/12/2025	16 Dec 2025	16 December 2025 at 15:28	16/12
fr-FR	16/12/2025	16 déc. 2025	16 décembre 2025 à 15:28	16/12
it-IT	16/12/25	16 dic 2025	16 dicembre 2025 alle ore 15:28	16/12
de-DE	16.12.25	16.12.2025	16. Dezember 2025 um 15:28	16.12.
es-ES	16/12/25	16 dic 2025	16 de diciembre de 2025, 15:28	16/12

Example

import { useDateFormatter, DATE_FORMAT } from "@dev-spendesk/grapes";

export default function ProductPage() {
  const dateFormatter = useDateFormatter();

  return <p>{dateFormatter(new Date(), DATE_FORMAT.MEDIUM)}</p>;
}

Example with Intl.DateTimeFormat options

import { useDateFormatter, DATE_FORMAT } from "@dev-spendesk/grapes";

export default function ProductPage() {
  const dateFormatter = useDateFormatter();

  return (
    <p>
      {dateFormatter(new Date(), DATE_FORMAT.CUSTOM, {
        day: "2-digit",
        month: "2-digit",
      })}
    </p>
  );
}

Example using only dateFormatter

import { dateFormatter } from "@dev-spendesk/grapes";

export function localeFormat(locale) {
  const formattedDate = dateFormatter(locale, new Date(), DATE_FORMAT.MEDIUM);
  return formattedDate;
}