feat: shared date formatters in spa utils respecting datesFormat/timeFormat settings

Author: ivictbor

adminforth/spa/src/components/ValueRenderer.vue

@@ -115,10 +115,7 @@
 
 <script setup lang="ts">
 
-import dayjs from 'dayjs';
-import utc from 'dayjs/plugin/utc';
-import timezone from 'dayjs/plugin/timezone';
-import {checkEmptyValues} from '@/utils';
+import {checkEmptyValues, formatDate, formatDateTime, formatTime} from '@/utils';
 import { useRoute, useRouter } from 'vue-router';
 import "vue3-json-viewer/dist/vue3-json-viewer.css";
 import { computed, defineAsyncComponent } from 'vue';
@@ -131,10 +128,6 @@ import type { any } from 'zod';
 const coreStore = useCoreStore();
 const route = useRoute();
 
-
-dayjs.extend(utc);
-dayjs.extend(timezone);
-
 const props = defineProps<{
   column: any,
   record: any
@@ -150,21 +143,6 @@ const canShowForeignRecord = computed(() => {
   )?.allowedActions?.show;
 });
 
-function formatDateTime(date: string) {
-  if (!date) return '';
-  return dayjs.utc(date).local().format(`${coreStore.config?.datesFormat} ${coreStore.config?.timeFormat}` || 'YYYY-MM-DD HH:mm:ss');
-}
-
-function formatDate(date: string) {
-  if (!date) return '';
-  return dayjs.utc(date).local().format(coreStore.config?.datesFormat || 'YYYY-MM-DD');
-}
-
-function formatTime(time: string) {
-  if (!time) return '';
-  return dayjs(`0000-00-00 ${time}`).format(coreStore.config?.timeFormat || 'HH:mm:ss');
-}
-
 function getArrayItemDisplayValue(value: any, column: AdminForthResourceColumnCommon) {
   if (column.isArray?.itemType === 'datetime') {
     return formatDateTime(value);

adminforth/spa/src/utils.ts

@@ -1,3 +1,4 @@
 export * from './utils/utils';
 export * from './utils/listUtils';
-export * from './utils/createEditUtils';
+export * from './utils/createEditUtils';
+export * from './utils/dateUtils';

adminforth/spa/src/utils/dateUtils.ts

@@ -0,0 +1,51 @@
+import dayjs from 'dayjs';
+import utc from 'dayjs/plugin/utc';
+import timezone from 'dayjs/plugin/timezone';
+import { useCoreStore } from '../stores/core';
+
+dayjs.extend(utc);
+dayjs.extend(timezone);
+
+export const DEFAULT_DATES_FORMAT = 'YYYY-MM-DD';
+export const DEFAULT_TIME_FORMAT = 'HH:mm:ss';
+
+type DateLike = string | number | Date | null | undefined;
+
+/**
+ * Date format configured in customization.datesFormat (or a sane default).
+ */
+export function getDatesFormat(): string {
+  return useCoreStore().config?.datesFormat || DEFAULT_DATES_FORMAT;
+}
+
+/**
+ * Time format configured in customization.timeFormat (or a sane default).
+ */
+export function getTimeFormat(): string {
+  return useCoreStore().config?.timeFormat || DEFAULT_TIME_FORMAT;
+}
+
+/**
+ * Formats UTC datetime into user's local time using formats from customization settings.
+ * Use it instead of toLocaleString() everywhere, so all dates in admin look the same.
+ */
+export function formatDateTime(date: DateLike): string {
+  if (!date) return '';
+  return dayjs.utc(date).local().format(`${getDatesFormat()} ${getTimeFormat()}`);
+}
+
+/**
+ * Formats date using format from customization settings.
+ */
+export function formatDate(date: DateLike): string {
+  if (!date) return '';
+  return dayjs.utc(date).local().format(getDatesFormat());
+}
+
+/**
+ * Formats standalone time value (e.g. "13:45:00") using format from customization settings.
+ */
+export function formatTime(time: string | null | undefined): string {
+  if (!time) return '';
+  return dayjs(`0000-00-00 ${time}`).format(getTimeFormat());
+}

adminforth/spa/src/utils/index.ts

@@ -1,3 +1,4 @@
 export * from './utils';
 export * from './listUtils';
-export * from './createEditUtils';
+export * from './createEditUtils';
+export * from './dateUtils';