FOUR-33514 | Due Date is Shown in Wrong Format

resources/js/next/config/user.js

@@ -1,6 +1,33 @@
 import { getGlobalVariable, setGlobalPMVariables } from "../globalVariables";
 import datetime_format from "../../data/datetime_formats.json";
 
+// Profile settings store PHP date tokens; Moment uses a different token set.
+export const momentFormatsFor = (phpFormat) => {
+  const match = datetime_format.find((value) => value.format === phpFormat);
+  if (!match) {
+    return null;
+  }
+  return {
+    datetime_format: match.momentFormat,
+    calendar_format: match.calendarFormat,
+  };
+};
+
+export const withMomentDateFormats = (user) => {
+  if (!user || typeof user !== "object") {
+    return user;
+  }
+  const formats = momentFormatsFor(user.datetime_format);
+  if (!formats) {
+    return user;
+  }
+  return {
+    ...user,
+    datetime_format: formats.datetime_format,
+    calendar_format: formats.calendar_format,
+  };
+};
+
 export default () => {
   const moment = getGlobalVariable("moment");
   const userID = document.head.querySelector("meta[name=\"user-id\"]");
@@ -25,12 +52,11 @@ export default () => {
       avatar: userAvatar?.content,
     };
 
-    datetime_format.forEach((value) => {
-      if (formatDate.content === value.format) {
-        user.datetime_format = value.momentFormat;
-        user.calendar_format = value.calendarFormat;
-      }
-    });
+    const formats = momentFormatsFor(formatDate?.content);
+    if (formats) {
+      user.datetime_format = formats.datetime_format;
+      user.calendar_format = formats.calendar_format;
+    }
 
     if (user) {
       moment.tz.setDefault(user.timezone);

resources/js/vite/tasks/loaderTasks.js

@@ -1,5 +1,6 @@
 import "../../../js/vite/bootstrap-globals.js";
 import { setupMain } from "../../../js/next/setupMain";
+import { withMomentDateFormats } from "../../next/config/user";
 import vueFormElements from "../../../js/next/libraries/vueFormElements";
 import modelerInspector from "../../../js/next/libraries/modelerInspector";
 import modeler from "../../../js/next/modeler";
@@ -19,7 +20,9 @@ window.ProcessMaker.defaultColumns = window.temporal.defaultColumns;
 window.ProcessMaker.isDefaultColumns = window.temporal.isDefaultColumns;
 window.ProcessMaker.userConfiguration = window.temporal.userConfiguration;
 window.ProcessMaker.showOldTaskScreen = window.temporal.showOldTaskScreen;
-window.ProcessMaker.user = window.temporal.user;
+// Blade user stores a PHP datetime format; convert it before Moment formatters read it.
+const pageUser = withMomentDateFormats(window.temporal.user);
+window.ProcessMaker.user = pageUser;
 window.ProcessMaker.selectedProcess = window.temporal.selectedProcess;
 window.ProcessMaker.defaultSavedSearchId = window.temporal.defaultSavedSearchId;
 window.ProcessMaker.isTceCustomization = window.temporal.isTceCustomization;
@@ -30,6 +33,6 @@ window.ProcessMaker.packages = window.temporal.packages;
 // Legacy Mix keys (lowercase "m") used by TasksMixin / ParticipantHomeScreen
 window.Processmaker = window.Processmaker || {};
 window.Processmaker.defaultColumns = window.temporal.defaultColumns;
-window.Processmaker.user = window.temporal.user;
+window.Processmaker.user = pageUser;
 window.Processmaker.selectedProcess = window.temporal.selectedProcess;
 window.Processmaker.defaultSavedSearchId = window.temporal.defaultSavedSearchId;