BACKLOG-23452: Provide a way to override date format in date time pic…

…ker using a configuration name forceDateFormat (DD/MM/YYYY, MM/DD/YYYY are only valid format) (#1778)
Jahia · Dec 12, 2024 · 626e7bf · 626e7bf
1 parent 272fc11
commit 626e7bf
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/src/javascript/SelectorTypes/DateTimePicker/DateTimePicker.jsx b/src/javascript/SelectorTypes/DateTimePicker/DateTimePicker.jsx
@@ -12,15 +12,30 @@ const variantMapper = {
     DateTimePicker: 'datetime'
 };
 
+function getDateFormat(editorContext) {
+    const userNavigatorLocale = editorContext.browserLang;
+    const allowedOverridesDateFormat = ['MM/DD/YYYY', 'DD/MM/YYYY'];
+
+    // Read date format from config
+    const forceDateFormat = window.contextJsParameters?.config?.contentEditor?.forceDateFormat;
+    if (forceDateFormat && !allowedOverridesDateFormat.includes(forceDateFormat)) {
+        console.warn(`forceDateFormat as been set to an invalid value (${forceDateFormat}). Please use one of the following values: ${allowedOverridesDateFormat.join(', ')}`);
+    } else if (forceDateFormat) {
+        return forceDateFormat;
+    }
+
+    // Fallback on browser language date format
+    return userNavigatorLocale in specificDateFormat ? specificDateFormat[userNavigatorLocale] : 'DD/MM/YYYY';
+}
+
 export const DateTimePicker = ({id, field, value, editorContext, onChange, onBlur}) => {
     const variant = variantMapper[field.selectorType];
     const isDateTime = variant === 'datetime';
     const disabledDays = fillDisabledDaysFromJCRConstraints(field, isDateTime);
 
-    const userNavigatorLocale = editorContext.browserLang;
+    const dateFormat = getDateFormat(editorContext);
 
-    let dateFormat = userNavigatorLocale in specificDateFormat ? specificDateFormat[userNavigatorLocale] : 'DD/MM/YYYY';
-    let displayDateFormat = isDateTime ? (dateFormat + ' HH:mm') : dateFormat;
+    const displayDateFormat = isDateTime ? (dateFormat + ' HH:mm') : dateFormat;
 
     let maskLocale = String(dateFormat).replace(/[^\W]+?/g, '_');
 

diff --git a/src/javascript/SelectorTypes/DateTimePicker/DateTimePicker.spec.js b/src/javascript/SelectorTypes/DateTimePicker/DateTimePicker.spec.js
@@ -114,4 +114,26 @@ describe('DateTimePicker component', () => {
 
         expect(cmp.props().dayPickerProps.disabledDays).toEqual([{before: new Date('2019-06-04T00:00:00.000')}]);
     });
+
+    it('should use the override date format when provided', () => {
+        window.contextJsParameters = {
+            config: {
+                contentEditor: {
+                    forceDateFormat: 'MM/DD/YYYY'
+                }
+            }
+        };
+        testDateFormat('de-DE', 'MM/DD/YYYY');
+    });
+
+    it('should NOT use the override date format when an invalid format is provided', () => {
+        window.contextJsParameters = {
+            config: {
+                contentEditor: {
+                    forceDateFormat: 'MM/DD/INVALID'
+                }
+            }
+        };
+        testDateFormat('de-DE', 'DD.MM.YYYY');
+    });
 });
diff --git a/src/main/resources/META-INF/configurations/org.jahia.modules.contentEditor.cfg b/src/main/resources/META-INF/configurations/org.jahia.modules.contentEditor.cfg
@@ -2,3 +2,7 @@
 
 # Allow to define the number of "New Content" buttons when an editing zone as content restrictions activated
 createChildrenDirectButtons.limit = 5
+
+# forceDateFormat overrides the browser locale format of date in content editor
+# Possible values are: DD/MM/YYYY, MM/DD/YYYY
+#forceDateFormat=DD/MM/YYYY