fix(i18n): use Intl.DateTimeFormat for locale-aware date/time display

src/util/time.ts

@@ -112,3 +112,29 @@ export function get_short_month_labels(locale?: string | string[]) {
     new Intl.DateTimeFormat(locale, { month: 'short' }).format(new Date(2020, month, 1, 12))
   );
 }
+
+// Format a date as locale-aware short date (e.g. "Jun 15" in en-US, "15 jun" in sv-SE)
+export function format_date_short(date: Date | string, locale?: string | string[]) {
+  const d = date instanceof Date ? date : new Date(date);
+  return new Intl.DateTimeFormat(locale, { month: 'short', day: 'numeric' }).format(d);
+}
+
+// Format a date with weekday prefix (e.g. "Mon, Jun 15" in en-US, "mån 15 jun" in sv-SE)
+export function format_date_with_weekday(date: Date | string, locale?: string | string[]) {
+  const d = date instanceof Date ? date : new Date(date);
+  return new Intl.DateTimeFormat(locale, {
+    weekday: 'short',
+    month: 'short',
+    day: 'numeric',
+  }).format(d);
+}
+
+// Format a time-of-day string locale-aware (e.g. "14:30:05" or "2:30:05 PM" per browser locale)
+export function format_time_of_day(date: Date | string, locale?: string | string[]) {
+  const d = date instanceof Date ? date : new Date(date);
+  return new Intl.DateTimeFormat(locale, {
+    hour: '2-digit',
+    minute: '2-digit',
+    second: '2-digit',
+  }).format(d);
+}

src/views/Trends.vue

@@ -89,7 +89,7 @@ div
 
 <script lang="ts">
 import moment from 'moment';
-import { get_today_with_offset } from '~/util/time';
+import { get_today_with_offset, format_date_short, format_date_with_weekday } from '~/util/time';
 import { buildBarchartDataset } from '~/util/datasets';
 import { canonicalEvents } from '~/queries';
 import { getClient } from '~/util/awclient';
@@ -161,14 +161,16 @@ export default {
     },
 
     currentRangeLabel(): string {
-      const start = this.currentStart.format('MMM D');
-      const end = moment(this.today).format('MMM D');
+      const start = format_date_short(this.currentStart.toDate());
+      const end = format_date_short(moment(this.today).toDate());
       return `${start} – ${end}`;
     },
 
     previousRangeLabel(): string {
-      const start = this.currentStart.clone().subtract(this.periodDays, 'days').format('MMM D');
-      const end = moment(this.today).subtract(this.periodDays, 'days').format('MMM D');
+      const start = format_date_short(
+        this.currentStart.clone().subtract(this.periodDays, 'days').toDate()
+      );
+      const end = format_date_short(moment(this.today).subtract(this.periodDays, 'days').toDate());
       return `${start} – ${end}`;
     },
 
@@ -210,7 +212,7 @@ export default {
         const total = evts.reduce((a, e) => a + (e.duration || 0), 0);
         if (!best || total > best.duration) {
           const start = period.split('/')[0];
-          best = { label: moment(start).format('ddd, MMM D'), duration: total };
+          best = { label: format_date_with_weekday(new Date(start)), duration: total };
         }
       }
       return best && best.duration > 0 ? best : null;

src/visualizations/timeline.ts

@@ -8,7 +8,7 @@ import _ from 'lodash';
 import moment from 'moment';
 
 import { getColorFromString } from '../util/color';
-import { seconds_to_duration } from '../util/time';
+import { seconds_to_duration, format_time_of_day } from '../util/time';
 import { IEvent } from '../util/interfaces';
 
 function show_info(container: HTMLElement, elem_id: string): void {
@@ -148,7 +148,7 @@ function update(
     _.each(e.data.subevents, function (t: IEvent) {
       const inforow = infolist.append('tr');
       // Clocktime
-      const clocktime = moment(t.timestamp).format('HH:mm:ss');
+      const clocktime = format_time_of_day(new Date(t.timestamp));
       inforow.append('td').text(clocktime);
       // Duration
       const duration = seconds_to_duration(t.duration);