staffbase.rocks, as data

Import the hook from the package and call it with a locale and the desired format styles.`import {useFormatDateTime} from '@staffbase/design/hooks';const EventDate = ({date}: {date: Date}) => {const locale = navigator.language; // or from your i18n contextconst formatter = useFormatDateTime(locale, 'long', 'short');return <time dateTime={date.toISOString()}>{formatter.format(date)}</time>;### Date only vs time onlyPass `undefined` for `timeStyle` to get a date-only output, or `undefined` for `dateStyle` to get a time-only output.`// Date only — pass undefined for timeStyleconst dateFormatter = useFormatDateTime('de-DE', 'long', undefined);dateFormatter.format(new Date()); // "25. Dezember 2025"// Time only — pass undefined for dateStyleconst timeFormatter = useFormatDateTime('de-DE', undefined, 'short');timeFormatter.format(new Date()); // "14:30"`## Format stylesThe same reference date — **December 25, 2025 at 14:30** — rendered across every format option. Switch the language dropdown above each table to see how the output changes per locale.### dateStyle`dateStyle` controls how the date portion is rendered. Pass `undefined` for `timeStyle` to get a date-only output.### timeStyle`timeStyle` controls how the time portion is rendered. Pass `undefined` for `dateStyle` to get a time-only output.### CombinedWhen both `dateStyle` and `timeStyle` are provided, the date and time are joined in a single locale-aware string.## Formatting date ranges`Intl.DateTimeFormat` exposes a `formatRange(startDate, endDate)` method that intelligently collapses the shared parts of two dates — so instead of “December 25, 2025 – January 3, 2026” you only see the parts that actually differ. The hook returns the formatter instance directly, so `formatRange` is available without any extra work.Reference range: **December 25, 2025 14:30 → January 3, 2026 09:15**.December 25, 2025 – January 3, 2026