Platform: Add translations to flatpickr - refs BT#20928

Author: christianbeeznest

public/main/inc/lib/formvalidator/Element/DateTimePicker.php

@@ -69,26 +69,64 @@ public function setValue($value)
      */
     private function getElementJS()
     {
-        $js = null;
+        $localeCode = $this->getLocaleCode();
         $id = $this->getAttribute('id');
-        //timeFormat: 'hh:mm'
-        $js .= "<script>
-            $(function() {
-                var config = {
-                    altInput: true,
-                    altFormat: '".get_lang('F d, Y')." ".get_lang('at')." H:i',
-                    enableTime: true,
-                    dateFormat: 'Y-m-d H:i',
-                    time_24hr: true,
-                    wrap: false,
-                    locale: {
-                      firstDayOfWeek: 1
-                    }
-                };
-                $('#{$id}').flatpickr(config);
+
+        $localeScript = '';
+        if ($localeCode !== 'en') {
+            $localeScript = '<script async="false" src="/build/flatpickr/l10n/' . $localeCode . '.js"></script>';
+        }
+
+        $js = $localeScript . "<script>
+        document.addEventListener('DOMContentLoaded', function () {
+            flatpickr('#{$id}', {
+                locale: '{$localeCode}',
+                altInput: true,
+                altFormat: '".get_lang('F d, Y')." ".get_lang('at')." H:i',
+                enableTime: true,
+                dateFormat: 'Y-m-d H:i',
+                time_24hr: true,
+                wrap: false
             });
+        });
         </script>";
 
         return $js;
     }
+
+    /**
+     * Retrieves the locale code based on user and course settings.
+     * Extracts the ISO language code from user or course settings and checks
+     * its availability in the list of supported locales. Returns 'en' if the language
+     * is not available.
+     *
+     * @return string Locale code (e.g., 'es', 'en', 'fr').
+     */
+    private function getLocaleCode()
+    {
+        $locale = api_get_language_isocode();
+        $userInfo = api_get_user_info();
+        if (is_array($userInfo) && !empty($userInfo['language'])) {
+            $locale = $userInfo['language'];
+        }
+
+        $courseInfo = api_get_course_info();
+        if (isset($courseInfo)) {
+            $locale = $courseInfo['language'];
+        }
+
+        $localeCode = explode('_', $locale)[0];
+        $availableLocales = [
+            'ar', 'ar-dz', 'at', 'az', 'be', 'bg', 'bn', 'bs', 'cat', 'ckb', 'cs', 'cy', 'da', 'de',
+            'eo', 'es', 'et', 'fa', 'fi', 'fo', 'fr', 'ga', 'gr', 'he', 'hi', 'hr', 'hu', 'hy',
+            'id', 'is', 'it', 'ja', 'ka', 'km', 'ko', 'kz', 'lt', 'lv', 'mk', 'mn', 'ms', 'my',
+            'nl', 'nn', 'no', 'pa', 'pl', 'pt', 'ro', 'ru', 'si', 'sk', 'sl', 'sq', 'sr', 'sr-cyr',
+            'sv', 'th', 'tr', 'uk', 'uz', 'uz_latn', 'vn', 'zh', 'zh-tw'
+        ];
+        if (!in_array($localeCode, $availableLocales)) {
+            $localeCode = 'en';
+        }
+
+        return $localeCode;
+    }
 }

webpack.config.js

@@ -98,6 +98,10 @@ Encore
           pattern: /(jquery.qtip.css)$/,
           to: 'libs/qtip2/dist/jquery.qtip.css'
         },
+        {
+          from: './node_modules/flatpickr/dist/l10n',
+          to: 'flatpickr/l10n/[name].[ext]'
+        },
         //{from: './node_modules/ckeditor4/', to: 'libs/ckeditor/[path][name].[ext]', pattern: /\.(js|css)$/, includeSubdirectories: false},
         //{from: './node_modules/ckeditor4/adapters', to: 'libs/ckeditor/adapters/[path][name].[ext]'},
         //{from: './node_modules/ckeditor4/lang', to: 'libs/ckeditor/lang/[path][name].[ext]'},