From 3c48dffdf2f97032257e9eee064229b442292b41 Mon Sep 17 00:00:00 2001
From: michael <1700346+mzhang28@users.noreply.github.com>
Date: Mon, 16 Dec 2024 04:18:52 -0600
Subject: [PATCH] Update displayDate to use local time format preferences
 (#4826)

* update date display time to use local browser locale

* incorporate displaySecond and displayDate

* rewrite

* a

---------

Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 frontend/src/lib/utils.ts                        | 16 +++++++++++++---
 .../routes/(root)/(logged)/routes/+page.svelte   | 10 +++++-----
 2 files changed, 18 insertions(+), 8 deletions(-)

diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 7c28f6eae6..7dde9aeb2d 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -72,14 +72,24 @@ export function displayDate(
 	displayDate = true
 ): string {
 	const date = new Date(dateString ?? '')
-	if (date.toString() === 'Invalid Date') {
+	if (Number.isNaN(date.valueOf())) {
 		return ''
 	} else {
-		return `${date.toLocaleTimeString([], {
+		const timeChoices: Intl.DateTimeFormatOptions = {
 			hour: '2-digit',
 			minute: '2-digit',
 			second: displaySecond ? '2-digit' : undefined
-		})}${displayDate ? ` ${date.getDate()}/${date.getMonth() + 1}` : ''}`
+		}
+		const dateChoices: Intl.DateTimeFormatOptions = displayDate
+			? {
+					day: 'numeric',
+					month: 'numeric'
+			  }
+			: {}
+		return date.toLocaleString(undefined, {
+			...timeChoices,
+			...dateChoices
+		})
 	}
 }
 
diff --git a/frontend/src/routes/(root)/(logged)/routes/+page.svelte b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
index 8906031338..2aae39245d 100644
--- a/frontend/src/routes/(root)/(logged)/routes/+page.svelte
+++ b/frontend/src/routes/(root)/(logged)/routes/+page.svelte
@@ -301,11 +301,11 @@
 						<div class="w-full flex justify-between items-baseline">
 							<div
 								class="flex flex-wrap text-[0.7em] text-tertiary gap-1 items-center justify-end truncate pr-2"
-								><div class="truncate">edited by {edited_by}</div><div class="truncate"
-									>the {displayDate(edited_at)}</div
-								></div
-							></div
-						>
+							>
+								<div class="truncate">edited by {edited_by}</div>
+								<div class="truncate">at {displayDate(edited_at)}</div>
+							</div>
+						</div>
 					</div>
 				{/each}
 			</div>