diff --git a/src/scripts/OSFramework/OSUI/Constants.ts b/src/scripts/OSFramework/OSUI/Constants.ts index f208a22bd2..acb2d2d443 100644 --- a/src/scripts/OSFramework/OSUI/Constants.ts +++ b/src/scripts/OSFramework/OSUI/Constants.ts @@ -107,6 +107,17 @@ namespace OSFramework.OSUI.Constants { /* cssClass to be checked if the RTL Feature is enabled */ export const IsRTLClass = 'is-rtl'; + /* To fix an issue when: + - The user is using a device with the Arabic Language + - The application IS NOT using the Arabic Language + + That makes date type inputs lose the date format and show the date in the wrong format, + We must force the text direction to RTL in the input in order to fix it. + + More info about this in the release notes of ROU-11464. + */ + export const IsRTLDeviceType = 'is-rtl-device'; + /* Store JavaScript types*/ export const JavaScriptTypes = { Undefined: 'undefined', diff --git a/src/scripts/OSFramework/OSUI/Helper/Device.ts b/src/scripts/OSFramework/OSUI/Helper/Device.ts index 56180ed998..89635975a6 100644 --- a/src/scripts/OSFramework/OSUI/Helper/Device.ts +++ b/src/scripts/OSFramework/OSUI/Helper/Device.ts @@ -262,6 +262,23 @@ namespace OSFramework.OSUI.Helper { return ua.includes(UAKeyword.opr) || ua.includes(UAKeyword.opera) || ua.includes(UAKeyword.opios); } + /** + * Checks if the user device language is an RTL language type. + * + * @private + * @static + * @return {*} {boolean} + * @memberof DeviceInfo + */ + private static _isRtlLanguage(): boolean { + // List of RTL languages + const rtlLanguages = ['ar', 'he', 'fa', 'ur', 'ps', 'syr', 'yi', 'ku', 'dv', 'ps', 'sd', 'ug']; + // Get the device user language + const userLanguage = navigator.language.split('-')[0]; + + return rtlLanguages.includes(userLanguage); + } + /** * Checks if it's running inside Safari browser. * @@ -375,6 +392,18 @@ namespace OSFramework.OSUI.Helper { return DeviceInfo._isIphoneWithNotch; } + /** + * Getter that returns if the device is set with an RTL language type + * + * @readonly + * @static + * @type {boolean} + * @memberof DeviceInfo + */ + public static get IsRtlLang(): boolean { + return DeviceInfo._isRtlLanguage(); + } + /** * Getter that returns if the application is running in a tablet device. * @@ -517,8 +546,6 @@ namespace OSFramework.OSUI.Helper { return notchPosition; } - /******************** PUBLIC METHODS ********************/ - /** * Gets in which browser the framework is running, based in the UserAgent information. * diff --git a/src/scripts/OutSystems/OSUI/Utils/LayoutPrivate.ts b/src/scripts/OutSystems/OSUI/Utils/LayoutPrivate.ts index d1366d14be..fbceb262da 100644 --- a/src/scripts/OutSystems/OSUI/Utils/LayoutPrivate.ts +++ b/src/scripts/OutSystems/OSUI/Utils/LayoutPrivate.ts @@ -153,6 +153,21 @@ namespace OutSystems.OSUI.Utils.LayoutPrivate { } } + /* To fix an issue when: + - The user is using a device with the Arabic Language + - The application IS NOT using the Arabic Language + + That makes date type inputs lose the date format and show the date in the wrong format, + We must force the text direction to RTL in the input in order to fix it. + + More info about this in the release notes of ROU-11464. + */ + // Check if device is configured with RTL language + if (OSFramework.OSUI.Helper.DeviceInfo.IsRtlLang) { + // Add the RTL class to the DatePicker input + OSFramework.OSUI.Helper.Dom.Styles.AddClass(body, OSFramework.OSUI.Constants.IsRTLDeviceType); + } + // Set the orientation change event LayoutPrivate.OnOrientationChange.Set(); } diff --git a/src/scss/01-foundations/_resets.scss b/src/scss/01-foundations/_resets.scss index b8ec7af859..4f65d44eec 100644 --- a/src/scss/01-foundations/_resets.scss +++ b/src/scss/01-foundations/_resets.scss @@ -179,6 +179,23 @@ input::-ms-clear { display: none; } +/// +.is-rtl-device { + input[type='date'], + input[type='datetime-local'] { + /* To fix an issue when: + - The user is using a device with the Arabic Language + - The application IS NOT using the Arabic Language + + That makes date type inputs lose the date format and show the date in the wrong format, + We must force the text direction to RTL in the input in order to fix it. + + More info about this in the release notes of ROU-11464. + */ + direction: rtl; + } +} + /* ============================================================================ */ /* Button */ /* ============================================================================ */