Use dayjs for UI datetime

src/shared/utils/base/date.js

@@ -1,5 +1,11 @@
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { useAppearanceSettingsStore } from '../../../stores';
 
+dayjs.extend(localizedFormat);
+dayjs.extend(customParseFormat);
+
 /**
  * @param {string} dateStr
  * @param {'long'|'short'} format
@@ -17,61 +23,36 @@ function formatDateFilter(dateStr, format) {
         return '-';
     }
 
-    const dt = new Date(dateStr);
+    const dt = dayjs(dateStr);
-    if (isNaN(dt.getTime())) {
+    if (!dt.isValid()) {
         return '-';
     }
 
-    function padZero(num) {
-        return String(num).padStart(2, '0');
-    }
-
     function toIsoLong(date) {
-        const y = date.getFullYear();
+        return date.format('YYYY-MM-DD HH:mm:ss');
-        const m = padZero(date.getMonth() + 1);
-        const d = padZero(date.getDate());
-        const hh = padZero(date.getHours());
-        const mm = padZero(date.getMinutes());
-        const ss = padZero(date.getSeconds());
-        return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
     }
 
     function toLocalShort(date) {
-        return date
+        // Use localized format for short date
-            .toLocaleDateString(isoFormat ? 'en-nz' : currentCulture, {
+        let fmt = 'MM/DD HH:mm';
-                month: '2-digit',
+        if (!isoFormat) {
-                day: '2-digit',
+            fmt = hour12 ? 'L LT' : 'L HH:mm';
-                hour: 'numeric',
+        }
-                minute: 'numeric',
+        let str = date.locale(currentCulture).format(fmt);
-                hourCycle: hour12 ? 'h12' : 'h23'
+        // Lowercase AM/PM
-            })
+        str = str.replace(' AM', 'am').replace(' PM', 'pm').replace(',', '');
-            .replace(' AM', 'am')
+        return str;
-            .replace(' PM', 'pm')
-            .replace(',', '');
     }
 
-    if (isoFormat) {
+    if (format === 'long') {
-        if (format === 'long') {
+        if (isoFormat) {
             return toIsoLong(dt);
         }
-        if (format === 'short') {
+        const fmt = hour12 ? 'L LTS' : 'L HH:mm:ss';
-            return toLocalShort(dt);
+        return dt.locale(currentCulture).format(fmt);
-        }
+    }
-    } else {
+    if (format === 'short') {
-        if (format === 'long') {
+        return toLocalShort(dt);
-            return dt.toLocaleDateString(currentCulture, {
-                month: '2-digit',
-                day: '2-digit',
-                year: 'numeric',
-                hour: 'numeric',
-                minute: 'numeric',
-                second: 'numeric',
-                hourCycle: hour12 ? 'h12' : 'h23'
-            });
-        }
-        if (format === 'short') {
-            return toLocalShort(dt);
-        }
     }
 
     return '-';