IBX-5688: Fixed flatpicker wrong convert on init (#792)

* IBX-5688: Fixed flatpicker wrong convert on init * using moment instead of Date * fix convert date to user timezone * adding helper for guessing user timezone * remove moment from admin.picker * renamed helper to browserTimezone * renamed local timezone method
ibexa · May 23, 2023 · df9c7a8 · df9c7a8
1 parent 8ea8f81
commit df9c7a8
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 3 deletions.
diff --git a/src/bundle/Resources/public/js/scripts/admin.picker.js b/src/bundle/Resources/public/js/scripts/admin.picker.js
@@ -3,7 +3,8 @@
     const SELECTOR_PICKER_INPUT = '.ibexa-date-time-picker__input';
     const SELECTOR_FORM_INPUT = '.ibexa-picker__form-input';
     const pickers = doc.querySelectorAll(SELECTOR_PICKER);
-    const { formatShortDateTime } = ibexa.helpers.timezone;
+    const { formatShortDateTime, convertDateToTimezone, getBrowserTimezone } = ibexa.helpers.timezone;
+    const userTimezone = ibexa.adminUiConfig.timezone;
     const pickerConfig = {
         enableTime: true,
         time_24hr: true,
@@ -23,7 +24,12 @@
         let defaultDate;
 
         if (formInput.value) {
-            defaultDate = new Date(formInput.value * 1000);
+            const date = new Date(formInput.value * 1000);
+            const dateWithUserTimezone = convertDateToTimezone(date, userTimezone);
+            const localTimezone = getBrowserTimezone();
+            const convertedDate = convertDateToTimezone(dateWithUserTimezone, localTimezone, true).format();
+
+            defaultDate = convertedDate;
         }
 
         const dateTimePickerWidget = new ibexa.core.DateTimePicker({
@@ -40,4 +46,4 @@
     };
 
     pickers.forEach(initFlatPickr);
-})(window, window.document, window.ibexa, window.flatpickr);
+})(window, window.document, window.ibexa);
diff --git a/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js b/src/bundle/Resources/public/js/scripts/helpers/timezone.helper.js
@@ -19,10 +19,14 @@
     const formatShortDateTime = (date, timezone = userPreferredTimezone, format = userPreferredShortDateTimeFormat) => {
         return formatDate(date, timezone, format);
     };
+    const getBrowserTimezone = () => {
+        return Intl.DateTimeFormat().resolvedOptions().timeZone;
+    };
 
     ibexa.addConfig('helpers.timezone', {
         convertDateToTimezone,
         formatFullDateTime,
         formatShortDateTime,
+        getBrowserTimezone,
     });
 })(window, window.document, window.ibexa, window.moment);