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	7/15/26	Jul 15, 2026	July 15, 2026 at 2:52 PM	07/15
en-UK	15/07/2026	15 Jul 2026	15 July 2026 at 14:52	15/07
fr-FR	15/07/2026	15 juil. 2026	15 juillet 2026 à 14:52	15/07
it-IT	15/07/26	15 lug 2026	15 luglio 2026 alle ore 14:52	15/07
de-DE	15.07.26	15.07.2026	15. Juli 2026 um 14:52	15.07.
es-ES	15/7/26	15 jul 2026	15 de julio de 2026 a las 14:52	15/7

Example

import { useDateFormatter, DATE_FORMAT } from "@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 "@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 "@spendesk/grapes";

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