feat: choose how dates are displayed (Standard / French / US)

Settings → General, beside the language. An operator reading 2026-07-30 as the
7th of the 30th month is reading their own log wrongly, and that is a display
problem.

Storage stays ISO/ADIF, deliberately and permanently: it is what ADIF
specifies, it sorts correctly as text, and a stored format that followed a UI
preference would make the log unreadable the day the preference changed. Exports
and uploads are untouched.

Two details that decide whether it actually works:

  - The columns are rebuilt when the format changes. The formatters are captured
    inside AG-Grid's column definitions, so nothing else would notice and the
    table would keep the old format until something forced a rebuild.
  - main.tsx re-reads the choice after the portable prefs are pulled from the
    database. The module reads localStorage at import time, which is BEFORE that
    sync — so a copied data/ folder would have shown ISO until the next launch.

UTC is not part of the choice and never will be: a logbook is kept in UTC, and
showing local time would make the display disagree with the QSO's own record
twice a year.

frontend/src/components/RecentQSOsGrid.tsx

@@ -5,6 +5,7 @@ import {
 } from 'ag-grid-community';
 import { hamlogGridTheme } from '@/lib/gridTheme';
 import { qslStatusCellClass } from '@/lib/qslStatus';
+import { formatDateTimeUTC, formatDateOnly, getDateFormat, subscribeDateFormat } from '@/lib/dateFormat';
 import { AgGridReact } from 'ag-grid-react';
 import { Columns3, FilterX, ListChecks } from 'lucide-react';
 import type { QSOForm } from '@/types';
@@ -86,23 +87,13 @@ function fmtMhzDots(hz?: number): string {
   return `${i}.${f.slice(0, 3)}.${f.slice(3, 6)}`;
 }
 
+// Both formatters follow the display preference (Settings → General). What is
+// STORED never changes — see lib/dateFormat.
 function fmtDateUTC(s: any): string {
-  if (!s) return '';
-  const d = new Date(s);
-  if (isNaN(d.getTime())) return s;
-  const p = (n: number) => String(n).padStart(2, '0');
-  return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())} ${p(d.getUTCHours())}:${p(d.getUTCMinutes())}`;
+  return formatDateTimeUTC(s);
 }
 function fmtDateOnly(s: any): string {
-  if (!s) return '';
-  const t = String(s).trim();
-  // QSL/LoTW/eQSL/ClubLog dates are ADIF YYYYMMDD; upload dates may be ISO.
-  const m = t.match(/^(\d{4})(\d{2})(\d{2})/);
-  if (m) return `${m[1]}-${m[2]}-${m[3]}`;
-  const d = new Date(t);
-  if (isNaN(d.getTime())) return t;
-  const p = (n: number) => String(n).padStart(2, '0');
-  return `${d.getUTCFullYear()}-${p(d.getUTCMonth() + 1)}-${p(d.getUTCDate())}`;
+  return formatDateOnly(s);
 }
 
 // Full catalog of selectable columns, grouped for the picker. `defaultVisible`
@@ -304,7 +295,11 @@ export function RecentQSOsGrid({ rows, myGrid, selectAllSignal, selectRowSignal,
   const [dispCount, setDispCount] = useState(0); // rows currently displayed (post column filters) — drives Select all ↔ Unselect all
 
   // Localized column catalog — rebuilt when the language changes.
-  const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid]);
+  // Rebuild the columns when the format changes: the formatters are captured
+  // inside the column definitions, so nothing else would notice.
+  const [dateFmt, setDateFmt] = useState(getDateFormat);
+  useEffect(() => subscribeDateFormat(() => setDateFmt(getDateFormat())), []);
+  const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid, dateFmt]);
 
   // Right-click: if the clicked row isn't already part of the selection,
   // select just it; then open the bulk-action menu on the whole selection.

frontend/src/components/SettingsModal.tsx

@@ -69,6 +69,7 @@ import {
 } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
 import { writeUiPref } from '@/lib/uiPref';
+import { getDateFormat, setDateFormat, type DateFormat } from '@/lib/dateFormat';
 import { useI18n, FlagGB, FlagFR, type Lang } from '@/lib/i18n';
 import { useTheme, CONCRETE_THEMES, type ThemeChoice } from '@/lib/theme';
 import { OperatingPanel } from '@/components/OperatingPanel';
@@ -1143,6 +1144,7 @@ export function SettingsModal({ onClose, onSaved, initialSection, onMainPaneChan
   // a trace already running came back unticked; the operator ticks the box to
   // turn it on, which turns it off, and the log they send has no trace in it.
   // Reported by a Xiegu user. Hydrated from the backend below.
+  const [dateFmtSel, setDateFmtSel] = useState<DateFormat>(getDateFormat);
   const [wkTrace, setWkTrace] = useState(false);
   const [civTrace, setCivTrace] = useState(false);
   useEffect(() => {
@@ -5222,6 +5224,27 @@ export function SettingsModal({ onClose, onSaved, initialSection, onMainPaneChan
             </div>
           </div>
 
+          {/* Display only. The log is stored in ISO/ADIF whatever is chosen here
+              — that is what ADIF specifies and what sorts correctly, and a
+              stored format that followed a preference would make the log
+              unreadable the day the preference changed. */}
+          <div className="flex items-center gap-3">
+            <Label className="text-sm w-40">{t('gen.dateFormat')}</Label>
+            <div className="inline-flex rounded-md border border-border overflow-hidden">
+              {([['iso', t('gen.dateStandard'), '2026-07-30 14:25'],
+                 ['fr', t('gen.dateFR'), '30-07-2026 14:25'],
+                 ['us', t('gen.dateUS'), '07-30-2026 14:25']] as [DateFormat, string, string][]).map(([code, label, sample]) => (
+                <button key={code} type="button" title={sample}
+                  onClick={() => { setDateFormat(code); setDateFmtSel(code); }}
+                  className={cn('flex flex-col items-start px-3 py-1 text-sm font-medium border-l border-border first:border-l-0',
+                    dateFmtSel === code ? 'bg-primary text-primary-foreground' : 'bg-card text-muted-foreground hover:bg-muted')}>
+                  {label}
+                  <span className="text-[10px] font-mono opacity-70">{sample}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+
           <ThemeSelector />
 
           <label className="flex items-center gap-2 text-sm cursor-pointer">

frontend/src/components/WorkedBeforeGrid.tsx

@@ -14,6 +14,7 @@ import { Checkbox } from '@/components/ui/checkbox';
 import { Badge } from '@/components/ui/badge';
 import type { WorkedBeforeView, QSOForm } from '@/types';
 import { makeColCatalog, GROUP_ORDER, groupLabel } from './RecentQSOsGrid';
+import { getDateFormat, subscribeDateFormat } from '@/lib/dateFormat';
 import { QSOContextMenu, type QSOMenuState } from './QSOContextMenu';
 import { loadLocal, loadRemote, saveState, seedLocal, whenGridPrefsReady } from '@/lib/gridPrefs';
 import { useI18n } from '@/lib/i18n';
@@ -63,7 +64,9 @@ export function WorkedBeforeGrid({ wb, myGrid, busy, currentCall, onRowDoubleCli
   const [menu, setMenu] = useState<QSOMenuState>(null);
 
   // Localized column catalog (shared with the Recent QSOs grid).
-  const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid]);
+  const [dateFmt, setDateFmt] = useState(getDateFormat);
+  useEffect(() => subscribeDateFormat(() => setDateFmt(getDateFormat())), []);
+  const COL_CATALOG = useMemo(() => makeColCatalog(t, myGrid), [t, myGrid, dateFmt]);
 
   function handleRowDoubleClicked(e: RowDoubleClickedEvent<WorkedEntry>) {
     if (e.data && onRowDoubleClicked) onRowDoubleClicked(e.data);