Merge pull request #1012 from OutSystems/ROU-11464

ROU-11464: Input type Date and DateTime - Fix a date format issues.

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',

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.
 		 *

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();
 		}

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                                                                       */
 /* ============================================================================ */