Toggle status page date format between 24hr and 12hr

site/frontend/src/pages/status/date-format-selection.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import {DATE_FMT_12HR} from "../../utils/formatting";
+
+const props = defineProps<{
+  dateFmt: string;
+  toggleDate(): void;
+}>();
+</script>
+
+<template>
+  <span>
+    <input
+      @click="props.toggleDate"
+      :checked="props.dateFmt === DATE_FMT_12HR"
+      type="checkbox"
+      id="user-date-fmt-toggle"
+    />
+    <label for="user-date-fmt-toggle">Show 12hr date format</label><br />
+  </span>
+</template>

site/frontend/src/pages/status/page.vue

@@ -9,6 +9,10 @@ import {
   formatISODate,
   formatSecondsAsDuration,
   parseDateIsoStringOrNull,
+  setDateFmt,
+  getDateFmt,
+  DATE_FMT_12HR,
+  DATE_FMT_24HR,
 } from "../../utils/formatting";
 import {useExpandedStore} from "../../utils/expansion";
 import {
@@ -20,6 +24,7 @@ import {
 } from "./data";
 import Collector from "./collector.vue";
 import CommitSha from "./commit-sha.vue";
+import DateFmtPicker from "./date-format-selection.vue";
 
 const loading = ref(true);
 
@@ -29,6 +34,11 @@ const data: Ref<{
   collectors: CollectorConfig[];
 } | null> = ref(null);
 
+// This state exists so the UI immediately update when a user changes their
+// date format preference. As only setting Local Storage does not trigger a
+// re-render.
+const dateFmt: Ref<string> = ref(getDateFmt());
+
 type BenchmarkRequestRow = BenchmarkRequest & {
   isLastInProgress: boolean;
   hasPendingJobs: boolean;
@@ -204,6 +214,17 @@ const {toggleExpanded: toggleExpandedErrors, isExpanded: hasExpandedErrors} =
 
 const tableWidth = 8;
 
+function toggleDate() {
+  let nextDateFmt: string;
+  if (dateFmt.value === DATE_FMT_24HR) {
+    nextDateFmt = DATE_FMT_12HR;
+  } else {
+    nextDateFmt = DATE_FMT_24HR;
+  }
+  setDateFmt(nextDateFmt);
+  dateFmt.value = nextDateFmt;
+}
+
 loadStatusData(loading);
 </script>
 
@@ -212,8 +233,9 @@ loadStatusData(loading);
     <div class="status-page-wrapper">
       <div class="timeline-wrapper">
         <h1>Timeline</h1>
-        <span class="small-padding-bottom">
+        <span class="local-time-message small-padding-bottom">
           <strong>Times are local.</strong>
+          <DateFmtPicker :toggleDate="toggleDate" :dateFmt="dateFmt" />
         </span>
         <span class="small-padding-bottom">
           <ExpectedCurrentRequestCompletion />
@@ -421,4 +443,11 @@ loadStatusData(loading);
 .small-padding-bottom {
   padding-bottom: 8px;
 }
+
+.local-time-message {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-bottom: 12px;
+}
 </style>

site/frontend/src/utils/formatting.ts

@@ -20,10 +20,25 @@ export function formatSecondsAsDuration(time: number): string {
   return s;
 }
 
-// Takes a date like `2025-09-10T08:22:47.161348Z` -> `"2025-09-10 08:22:47"`
+export const DATE_FMT_KEY = "__rustc-perf-user-date-fmt-preference__";
+// Date formats taken from https://date-fns.org/v4.1.0/docs/format
+export const DATE_FMT_24HR = "yyyy-MM-dd HH:mm:ss";
+export const DATE_FMT_12HR = "yyyy-MM-dd hh:mm:ss a";
+
+export function setDateFmt(dateFmt: string) {
+  window.localStorage.setItem(DATE_FMT_KEY, dateFmt);
+}
+
+export function getDateFmt() {
+  return window.localStorage.getItem(DATE_FMT_KEY) ?? DATE_FMT_24HR;
+}
+
+// Takes a date like `2025-09-10T08:22:47.161348Z` and formats it according to
+// the user preference stored in local storage (either 12 hour or 24 hour format).
 export function formatISODate(dateString?: string): string {
   if (dateString) {
-    return format(parseISO(dateString), "yyyy-MM-dd HH:mm:ss");
+    const dateFmt = getDateFmt();
+    return format(parseISO(dateString), dateFmt);
   }
   return "";
 }