Skip to content

useDateFormatters ​

Formatting helpers that respect the selected timezone, hour cycle and the loaded date-fns locale.

ts
import { useDateFormatters } from "@zaptime/core";

const { getFormattedTime, getFormattedDay, getFormattedDayInMonth, loadDateFnsConfig } = useDateFormatters();

All formatters take an ISO 8601 string, e.g. timeSlot.start.

Load the locale ​

Loads the date-fns locale for locale.preset and the start of the week. Await it during initialization before rendering anything; until it resolves everything is formatted in English.

ts
await loadDateFnsConfig("de");

Get formatted time ​

h:mmaaa in 12-hour mode, H:mm in 24-hour mode.

ts
getFormattedTime(slot.start); // "2:30pm" or "14:30"

Get formatted day ​

Localized weekday name.

ts
getFormattedDay(slot.start); // "Thursday"

Get formatted day in month ​

Localized long date.

ts
getFormattedDayInMonth(slot.start); // "Thursday, November 21st, 2024"