refactor: show time

src/pages/09_task-order/expansion/receive/InfoMessengerExpansion.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 // NOTE: Import stores
-import { dateFormat } from 'src/utils/datetime';
+import { dateFormatJS } from 'src/utils/datetime';
 
 // NOTE  Import Types
 import {
@@ -96,7 +96,11 @@ defineProps<{
           :label="$t('taskOrder.workStartDate')"
         >
           <template #value>
-            {{ acceptedAt ? dateFormat(acceptedAt) : '-' }}
+            {{
+              acceptedAt
+                ? dateFormatJS({ date: acceptedAt, withTime: true })
+                : '-'
+            }}
           </template>
         </DataDisplay>
 
@@ -105,7 +109,11 @@ defineProps<{
           :label="$t('taskOrder.workSubmissionDate')"
         >
           <template #value>
-            {{ submittedAt ? dateFormat(submittedAt) : '-' }}
+            {{
+              submittedAt
+                ? dateFormatJS({ date: submittedAt, withTime: true })
+                : '-'
+            }}
           </template>
         </DataDisplay>
 

src/utils/datetime.ts

@@ -19,7 +19,8 @@ export function dateFormatJS(opts: {
   noDay?: boolean;
   noMonth?: boolean;
   noYear?: boolean;
-}) {
+  withTime?: boolean;
+}): string {
   const dt = opts.date ? new Date(opts.date) : new Date();
 
   const { locale } = i18n.global;
@@ -35,6 +36,17 @@ export function dateFormatJS(opts: {
     opts.timeStyle = opts.timeStyle || 'short';
   }
 
+  let timeText = opts.withTime
+    ? ' ' +
+      dateFormatJS({
+        date: opts.date,
+        timeOnly: true,
+        timeStyle: opts.timeStyle,
+      })
+    : '';
+
+  if (timeText) opts.timeStyle = undefined;
+
   let formatted = new Intl.DateTimeFormat(opts.locale, {
     day: opts.noDay ? undefined : opts.dayStyle || 'numeric',
     month: opts.noMonth ? undefined : opts.monthStyle || 'short',
@@ -46,11 +58,13 @@ export function dateFormatJS(opts: {
     case Lang.Thai:
     case 'th-TH':
     case 'th-Th':
-      return formatted.replace(/(\d{4})/, (year) =>
-        (parseInt(year) - 543).toString(),
+      return (
+        formatted.replace(/(\d{4})/, (year) =>
+          (parseInt(year) - 543).toString(),
+        ) + timeText
       );
     default:
-      return formatted;
+      return formatted + timeText;
   }
 }