From 240a2b09f7674449a45ddc45ef16144856fc2011 Mon Sep 17 00:00:00 2001
From: Azri Kahar <42867097+azrikahar@users.noreply.github.com>
Date: Fri, 18 Feb 2022 23:22:12 +0800
Subject: [PATCH] Align displayed time for 24 hours format (#11703)

---
 app/src/interfaces/datetime/datetime.vue | 3 ++-
 app/src/lang/translations/en-US.yaml     | 2 ++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/interfaces/datetime/datetime.vue b/app/src/interfaces/datetime/datetime.vue
index 5e7e99f2ad..bef0444955 100644
--- a/app/src/interfaces/datetime/datetime.vue
+++ b/app/src/interfaces/datetime/datetime.vue
@@ -70,7 +70,8 @@ export default defineComponent({
 					displayValue.value = null;
 					return;
 				}
-				const timeFormat = props.includeSeconds ? 'date-fns_time' : 'date-fns_time_no_seconds';
+				let timeFormat = props.includeSeconds ? 'date-fns_time' : 'date-fns_time_no_seconds';
+				if (props.use24) timeFormat = props.includeSeconds ? 'date-fns_time_24hour' : 'date-fns_time_no_seconds_24hour';
 				let format = `${t('date-fns_date')} ${t(timeFormat)}`;
 				if (props.type === 'date') format = String(t('date-fns_date'));
 				if (props.type === 'time') format = String(t(timeFormat));
diff --git a/app/src/lang/translations/en-US.yaml b/app/src/lang/translations/en-US.yaml
index 7a2dc5fd87..b31f11b561 100644
--- a/app/src/lang/translations/en-US.yaml
+++ b/app/src/lang/translations/en-US.yaml
@@ -363,6 +363,8 @@ delete_share: Delete Share
 date-fns_date: PPP
 date-fns_time: 'h:mm:ss a'
 date-fns_time_no_seconds: 'h:mm a'
+date-fns_time_24hour: 'HH:mm:ss'
+date-fns_time_no_seconds_24hour: 'HH:mm'
 date-fns_date_short: 'MMM d, u'
 date-fns_time_short: 'h:mma'
 date-fns_date_short_no_year: MMM d