diff --git a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
index 42eb8f7ad..fb1917d30 100644
--- a/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/events/EventsTable.tsx
@@ -4,8 +4,10 @@ import Empty from 'components/common/Empty';
import Avatar from 'components/common/Avatar';
import Link from 'next/link';
import Icons from 'components/icons';
+import { useIntl } from 'react-intl';
export function EventsTable({ data = [] }) {
+ const intl = useIntl();
const { formatTimezoneDate } = useTimezone();
const { formatMessage, labels } = useMessages();
const { renderTeamUrl } = useTeamUrl();
@@ -35,7 +37,7 @@ export function EventsTable({ data = [] }) {
}}
- {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
+ {row => formatTimezoneDate(intl, row.createdAt, { dateStyle: 'long', timeStyle: 'medium' })}
);
diff --git a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
index f40be9dbc..1f1003313 100644
--- a/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
+++ b/src/app/(main)/websites/[websiteId]/realtime/RealtimeLog.tsx
@@ -12,6 +12,7 @@ import { Icon, SearchField, StatusLight, Text } from 'react-basics';
import { FixedSizeList } from 'react-window';
import { WebsiteContext } from '../WebsiteProvider';
import styles from './RealtimeLog.module.css';
+import { useIntl } from 'react-intl';
const TYPE_ALL = 'all';
const TYPE_PAGEVIEW = 'pageview';
@@ -25,6 +26,7 @@ const icons = {
};
export function RealtimeLog({ data }: { data: RealtimeData }) {
+ const intl = useIntl();
const website = useContext(WebsiteContext);
const [search, setSearch] = useState('');
const { formatMessage, labels, messages, FormattedMessage } = useMessages();
@@ -53,7 +55,8 @@ export function RealtimeLog({ data }: { data: RealtimeData }) {
},
];
- const getTime = ({ createdAt, firstAt }) => formatTimezoneDate(firstAt || createdAt, 'h:mm:ss');
+ const getTime = ({ createdAt, firstAt }) =>
+ formatTimezoneDate(intl, firstAt || createdAt, { timeStyle: 'medium' });
const getColor = ({ id, sessionId }) => stringToColor(sessionId || id);
diff --git a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
index 3fea4836c..0a682c5d8 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/SessionsTable.tsx
@@ -4,8 +4,10 @@ import { useFormat, useMessages, useTimezone } from 'components/hooks';
import Avatar from 'components/common/Avatar';
import styles from './SessionsTable.module.css';
import TypeIcon from 'components/common/TypeIcon';
+import { useIntl } from 'react-intl';
export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean }) {
+ const intl = useIntl();
const { formatTimezoneDate } = useTimezone();
const { formatMessage, labels } = useMessages();
const { formatValue } = useFormat();
@@ -51,7 +53,7 @@ export function SessionsTable({ data = [] }: { data: any[]; showDomain?: boolean
)}
- {row => formatTimezoneDate(row.createdAt, 'PPPpp')}
+ {row => formatTimezoneDate(intl, row.createdAt, { dateStyle: 'long', timeStyle: 'medium' })}
);
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
index fd498ac3a..e1f0732b9 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionActivity.tsx
@@ -3,6 +3,7 @@ import { Loading, Icon, StatusLight } from 'react-basics';
import Icons from 'components/icons';
import { useSessionActivity, useTimezone } from 'components/hooks';
import styles from './SessionActivity.module.css';
+import { useIntl } from 'react-intl';
export function SessionActivity({
websiteId,
@@ -15,6 +16,7 @@ export function SessionActivity({
startDate: Date;
endDate: Date;
}) {
+ const intl = useIntl();
const { formatTimezoneDate } = useTimezone();
const { data, isLoading } = useSessionActivity(websiteId, sessionId, startDate, endDate);
@@ -33,12 +35,14 @@ export function SessionActivity({
return (
<>
{showHeader && (
-
{formatTimezoneDate(createdAt, 'EEEE, PPP')}
+
+ {formatTimezoneDate(intl, createdAt, { dateStyle: 'full' })}
+
)}
- {formatTimezoneDate(createdAt, 'h:mm:ss aaa')}
+ {formatTimezoneDate(intl, createdAt, { timeStyle: 'medium' })}
{eventName ? : }
diff --git a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
index 6f9a8f3d5..66353816f 100644
--- a/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
+++ b/src/app/(main)/websites/[websiteId]/sessions/[sessionId]/SessionInfo.tsx
@@ -3,8 +3,10 @@ import TypeIcon from 'components/common/TypeIcon';
import { Icon, CopyIcon } from 'react-basics';
import Icons from 'components/icons';
import styles from './SessionInfo.module.css';
+import { useIntl } from 'react-intl';
export default function SessionInfo({ data }) {
+ const intl = useIntl();
const { locale } = useLocale();
const { formatTimezoneDate } = useTimezone();
const { formatMessage, labels } = useMessages();
@@ -20,10 +22,14 @@ export default function SessionInfo({ data }) {
{formatMessage(labels.lastSeen)}
-
{formatTimezoneDate(data?.lastAt, 'EEEE, PPPpp')}
+
+ {formatTimezoneDate(intl, data?.lastAt, { dateStyle: 'full', timeStyle: 'medium' })}
+
{formatMessage(labels.firstSeen)}
-
{formatTimezoneDate(data?.firstAt, 'EEEE, PPPpp')}
+
+ {formatTimezoneDate(intl, data?.firstAt, { dateStyle: 'full', timeStyle: 'medium' })}
+
{formatMessage(labels.country)}