Updated date formatting for locales.

components/common/Calendar.js

@@ -18,7 +18,7 @@ import {
 } from 'date-fns';
 import Button from './Button';
 import useLocale from 'hooks/useLocale';
-import { dateFormat } from 'lib/lang';
+import { dateFormat } from 'lib/date';
 import { chunk } from 'lib/array';
 import Chevron from 'assets/chevron-down.svg';
 import Cross from 'assets/times.svg';

components/common/DateFilter.js

@@ -6,8 +6,7 @@ import Modal from './Modal';
 import DropDown from './DropDown';
 import DatePickerForm from 'components/forms/DatePickerForm';
 import useLocale from 'hooks/useLocale';
-import { getDateRange } from 'lib/date';
+import { getDateRange, dateFormat } from 'lib/date';
-import { dateFormat } from 'lib/lang';
 import Calendar from 'assets/calendar-alt.svg';
 import Icon from './Icon';
 

components/metrics/BarChart.js

@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import ChartJS from 'chart.js';
 import Legend from 'components/metrics/Legend';
 import { formatLongNumber } from 'lib/format';
-import { dateFormat, timeFormat } from 'lib/lang';
+import { dateFormat } from 'lib/date';
 import useLocale from 'hooks/useLocale';
 import useTheme from 'hooks/useTheme';
 import { DEFAUL_CHART_HEIGHT, DEFAULT_ANIMATION_DURATION, THEME_COLORS } from 'lib/constants';
@@ -46,7 +46,7 @@ export default function BarChart({
       case 'minute':
         return index % 2 === 0 ? dateFormat(d, 'H:mm', locale) : '';
       case 'hour':
-        return timeFormat(d, locale);
+        return dateFormat(d, 'p', locale);
       case 'day':
         if (records > 31) {
           if (w <= 500) {
@@ -93,9 +93,9 @@ export default function BarChart({
   function getTooltipFormat(unit) {
     switch (unit) {
       case 'hour':
-        return 'EEE ha — MMM d yyyy';
+        return 'EEE p — PPP';
       default:
-        return 'EEE MMMM d yyyy';
+        return 'PPPP';
     }
   }
 

components/metrics/RealtimeLog.js

@@ -2,11 +2,11 @@ import React, { useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { FixedSizeList } from 'react-window';
 import firstBy from 'thenby';
-import { format } from 'date-fns';
 import Icon from 'components/common/Icon';
 import Tag from 'components/common/Tag';
 import Dot from 'components/common/Dot';
 import FilterButtons from 'components/common/FilterButtons';
+import NoData from 'components/common/NoData';
 import { devices } from 'components/messages';
 import useLocale from 'hooks/useLocale';
 import useCountryNames from 'hooks/useCountryNames';
@@ -15,8 +15,8 @@ import Bolt from 'assets/bolt.svg';
 import Visitor from 'assets/visitor.svg';
 import Eye from 'assets/eye.svg';
 import { stringToColor } from 'lib/format';
+import { dateFormat } from 'lib/date';
 import styles from './RealtimeLog.module.css';
-import NoData from '../common/NoData';
 
 const TYPE_ALL = 0;
 const TYPE_PAGEVIEW = 1;
@@ -145,7 +145,7 @@ export default function RealtimeLog({ data, websites, websiteId }) {
   }
 
   function getTime({ created_at }) {
-    return format(new Date(created_at), 'h:mm:ss');
+    return dateFormat(new Date(created_at), 'pp', locale);
   }
 
   function getColor(row) {

lib/date.js

@@ -23,7 +23,10 @@ import {
   differenceInCalendarDays,
   differenceInCalendarMonths,
   differenceInCalendarYears,
+  format,
 } from 'date-fns';
+import { enUS } from 'date-fns/locale';
+import { dateLocales } from 'lib/lang';
 
 export function getTimezone() {
   return moment.tz.guess();
@@ -150,3 +153,16 @@ export function getDateLength(startDate, endDate, unit) {
   const [diff] = dateFuncs[unit];
   return diff(endDate, startDate) + 1;
 }
+
+export const customFormats = {
+  'en-US': {
+    p: 'ha',
+    pp: 'h:mm:ss',
+  },
+};
+
+export function dateFormat(date, str, locale = 'en-US') {
+  return format(date, customFormats?.[locale]?.[str] || str, {
+    locale: dateLocales[locale] || enUS,
+  });
+}

lib/lang.js

@@ -1,4 +1,3 @@
-import { format } from 'date-fns';
 import {
   cs,
   da,
@@ -118,11 +117,6 @@ export const dateLocales = {
   'it-IT': it,
 };
 
-const timeFormats = {
-  // https://date-fns.org/v2.17.0/docs/format
-  'en-US': 'ha',
-};
-
 export const menuOptions = [
   { label: '中文', value: 'zh-CN', display: 'cn' },
   { label: '中文(繁體)', value: 'zh-TW', display: 'tw' },
@@ -153,11 +147,3 @@ export const menuOptions = [
   { label: 'Türkçe', value: 'tr-TR', display: 'tr' },
   { label: 'українська', value: 'uk-UA', display: 'uk' },
 ];
-
-export function dateFormat(date, str, locale) {
-  return format(date, str, { locale: dateLocales[locale] || enUS });
-}
-
-export function timeFormat(date, locale = 'en-US') {
-  return format(date, timeFormats[locale] || 'p', { locale: dateLocales[locale] });
-}