From 95f3bdb2c2faeac2da2ff506d839b1801ce029e2 Mon Sep 17 00:00:00 2001 From: Yash Maheshwari Date: Thu, 18 Apr 2024 10:21:06 +0530 Subject: [PATCH 1/2] Fixed: the 12-hour format issue when using specific formatting options in luxon(#188) --- src/utils/index.ts | 8 +++++--- src/views/BrokeringRuns.vue | 4 ++++ src/views/Settings.vue | 2 +- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/utils/index.ts b/src/utils/index.ts index 027388f..f9fee80 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -34,15 +34,17 @@ const sortSequence = (sequence: Array, sortOnField = "sequ } const getTime = (time: any) => { - return time ? DateTime.fromMillis(time).toLocaleString(DateTime.TIME_SIMPLE) : "-"; + // Directly using TIME_SIMPLE for formatting the time does not work, as the Intl is set in that way. So, using hourCycle to always get the time in 12-hour format + // https://github.com/moment/luxon/issues/998 + return time ? DateTime.fromMillis(time).toLocaleString({ ...DateTime.TIME_SIMPLE, hourCycle: "h12" }) : "-"; } function getDate(runTime: any) { - return DateTime.fromMillis(runTime).toLocaleString(DateTime.DATE_MED); + return DateTime.fromMillis(runTime).toLocaleString({ ...DateTime.DATE_MED, hourCycle: "h12" }); } function getDateAndTime(time: any) { - return time ? DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED) : "-"; + return time ? DateTime.fromMillis(time).toLocaleString({ ...DateTime.DATETIME_MED, hourCycle: "h12" }) : "-"; } function getDateAndTimeShort(time: any) { diff --git a/src/views/BrokeringRuns.vue b/src/views/BrokeringRuns.vue index 5ed6d1f..6b7d62b 100644 --- a/src/views/BrokeringRuns.vue +++ b/src/views/BrokeringRuns.vue @@ -113,6 +113,10 @@ onIonViewWillEnter(async () => { }) function timeTillRun(time: any) { + if(!time) { + return; + } + const timeDiff = DateTime.fromMillis(time).diff(DateTime.local()); return DateTime.local().plus(timeDiff).toRelative(); } diff --git a/src/views/Settings.vue b/src/views/Settings.vue index f501fb9..b4a37ea 100644 --- a/src/views/Settings.vue +++ b/src/views/Settings.vue @@ -142,7 +142,7 @@ function logout() { } function getDateTime(time: any) { - return time ? DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED) : ""; + return time ? DateTime.fromMillis(time).toLocaleString({ ...DateTime.DATETIME_MED, hourCycle: "h12" }) : ""; } function goToOms() { From 2e2781c0de4c708c2dd2f3cff9c4fc6c06093619 Mon Sep 17 00:00:00 2001 From: Yash Maheshwari Date: Thu, 18 Apr 2024 10:39:35 +0530 Subject: [PATCH 2/2] Improved: time on the query page to be displayed in 12-hour format(#118) --- src/utils/index.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/utils/index.ts b/src/utils/index.ts index f9fee80..abd87df 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -34,7 +34,7 @@ const sortSequence = (sequence: Array, sortOnField = "sequ } const getTime = (time: any) => { - // Directly using TIME_SIMPLE for formatting the time does not work, as the Intl is set in that way. So, using hourCycle to always get the time in 12-hour format + // Directly using TIME_SIMPLE for formatting the time results the time always in 24-hour format, as the Intl is set in that way. So, using hourCycle to always get the time in 12-hour format // https://github.com/moment/luxon/issues/998 return time ? DateTime.fromMillis(time).toLocaleString({ ...DateTime.TIME_SIMPLE, hourCycle: "h12" }) : "-"; } @@ -48,8 +48,9 @@ function getDateAndTime(time: any) { } function getDateAndTimeShort(time: any) { - // format: hh:mm(localized 24-hour time) date/month - return time ? DateTime.fromMillis(time).toFormat("T dd/LL") : "-"; + // format: hh:mm(localized 12-hour time) date/month + // Using toLocaleString as toFormat is not converting the time in 12-hour format + return time ? DateTime.fromMillis(time).toLocaleString({ hour: "numeric", minute: "numeric", day: "numeric", month: "numeric", hourCycle: "h12" }) : "-"; } function timeTillRun(endTime: any) {