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.
| SHORT | MEDIUM | LONG_WITH_TIME | CUSTOM | |
|---|---|---|---|---|
| en-US | 9/11/26 | Sep 11, 2026 | September 11, 2026 at 12:28 PM | 09/11 |
| en-UK | 11/09/2026 | 11 Sept 2026 | 11 September 2026 at 12:28 | 11/09 |
| fr-FR | 11/09/2026 | 11 sept. 2026 | 11 septembre 2026 à 12:28 | 11/09 |
| it-IT | 11/09/26 | 11 set 2026 | 11 settembre 2026 alle ore 12:28 | 11/09 |
| de-DE | 11.09.26 | 11.09.2026 | 11. September 2026 um 12:28 | 11.09. |
| es-ES | 11/9/26 | 11 sept 2026 | 11 de septiembre de 2026 a las 12:28 | 11/9 |
import { useDateFormatter, DATE_FORMAT } from "@spendesk/grapes";
export default function ProductPage() {
const dateFormatter = useDateFormatter();
return <p>{dateFormatter(new Date(), DATE_FORMAT.MEDIUM)}</p>;
}
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>
);
}
import { dateFormatter } from "@spendesk/grapes";
export function localeFormat(locale) {
const formattedDate = dateFormatter(locale, new Date(), DATE_FORMAT.MEDIUM);
return formattedDate;
}