fix(datetime): graceful fallback during SSR when navigator is undefined

This commit is contained in:
Nicolas Meienberger 2026-03-22 11:21:51 +01:00
parent 80e5e117c8
commit 79344eb311

View file

@ -2,6 +2,8 @@ import { formatDistanceToNow, isValid } from "date-fns";
type DateInput = Date | string | number | null | undefined;
const getLocales = () => (typeof navigator !== "undefined" ? navigator.languages : undefined);
function formatValidDate(date: DateInput, formatter: (date: Date) => string): string {
if (!date) return "Never";
@ -14,7 +16,7 @@ function formatValidDate(date: DateInput, formatter: (date: Date) => string): st
// 1/10/2026, 2:30 PM
export function formatDateTime(date: DateInput): string {
return formatValidDate(date, (validDate) =>
Intl.DateTimeFormat(navigator.languages, {
Intl.DateTimeFormat(getLocales(), {
month: "numeric",
day: "numeric",
year: "numeric",
@ -27,7 +29,7 @@ export function formatDateTime(date: DateInput): string {
// Jan 10, 2026
export function formatDateWithMonth(date: DateInput): string {
return formatValidDate(date, (validDate) =>
Intl.DateTimeFormat(navigator.languages, {
Intl.DateTimeFormat(getLocales(), {
month: "short",
day: "numeric",
year: "numeric",
@ -38,7 +40,7 @@ export function formatDateWithMonth(date: DateInput): string {
// 1/10/2026
export function formatDate(date: DateInput): string {
return formatValidDate(date, (validDate) =>
Intl.DateTimeFormat(navigator.languages, {
Intl.DateTimeFormat(getLocales(), {
month: "numeric",
day: "numeric",
year: "numeric",
@ -49,7 +51,7 @@ export function formatDate(date: DateInput): string {
// 1/10
export function formatShortDate(date: DateInput): string {
return formatValidDate(date, (validDate) =>
Intl.DateTimeFormat(navigator.languages, {
Intl.DateTimeFormat(getLocales(), {
month: "numeric",
day: "numeric",
}).format(validDate),
@ -59,7 +61,7 @@ export function formatShortDate(date: DateInput): string {
// 1/10, 2:30 PM
export function formatShortDateTime(date: DateInput): string {
return formatValidDate(date, (validDate) =>
Intl.DateTimeFormat(navigator.languages, {
Intl.DateTimeFormat(getLocales(), {
month: "numeric",
day: "numeric",
hour: "numeric",
@ -71,7 +73,7 @@ export function formatShortDateTime(date: DateInput): string {
// 2:30 PM
export function formatTime(date: DateInput): string {
return formatValidDate(date, (validDate) =>
Intl.DateTimeFormat(navigator.languages, {
Intl.DateTimeFormat(getLocales(), {
hour: "numeric",
minute: "numeric",
}).format(validDate),