From d19a3d7ad142f1657ce0df16bc824c2b31445bca Mon Sep 17 00:00:00 2001
From: Nikki Gonzales
 <38495263+nikkithelegendarypokemonster@users.noreply.github.com>
Date: Wed, 17 Jul 2024 19:15:56 +0800
Subject: [PATCH] DateBox: update regex pattern add  'x' (T1241387) (#27770)

Signed-off-by: Anton Kuznetsov <ksercs0@gmail.com>
Co-authored-by: Anton Kuznetsov <ksercs0@gmail.com>
# Conflicts:
#	packages/devextreme/artifacts/transpiled-renovation-npm/__internal/ui/date_box/m_date_box.mask.parts.js
---
 js/localization/ldml/date.parser.js           |  3 ++
 .../ui/date_box/m_date_box.mask.parts.js      |  9 +++--
 .../datebox.mask.tests.js                     | 34 +++++++++++++++++++
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/js/localization/ldml/date.parser.js b/js/localization/ldml/date.parser.js
index 199685d749d3..b9ad3b6f3ca7 100644
--- a/js/localization/ldml/date.parser.js
+++ b/js/localization/ldml/date.parser.js
@@ -62,6 +62,9 @@ const PATTERN_REGEXPS = {
     },
     w: function(count) {
         return count === 2 ? '[1-5][0-9]|0?[0-9]' : '0??[0-9]|[1-5][0-9]';
+    },
+    x: function(count) {
+        return count === 3 ? '[+-](?:2[0-3]|[01][0-9]):(?:[0-5][0-9])|Z' : '[+-](?:2[0-3]|[01][0-9])(?:[0-5][0-9])|Z';
     }
 };
 
diff --git a/packages/devextreme/artifacts/transpiled-renovation-npm/__internal/ui/date_box/m_date_box.mask.parts.js b/packages/devextreme/artifacts/transpiled-renovation-npm/__internal/ui/date_box/m_date_box.mask.parts.js
index 93f4dc96df1b..2880d99b79a4 100644
--- a/packages/devextreme/artifacts/transpiled-renovation-npm/__internal/ui/date_box/m_date_box.mask.parts.js
+++ b/packages/devextreme/artifacts/transpiled-renovation-npm/__internal/ui/date_box/m_date_box.mask.parts.js
@@ -35,7 +35,8 @@ const PATTERN_GETTERS = {
   h: 'getHours',
   m: 'getMinutes',
   s: 'getSeconds',
-  S: 'getMilliseconds'
+  S: 'getMilliseconds',
+  x: 'getTimezoneOffset',
 };
 const PATTERN_SETTERS = (0, _extend.extend)({}, (0, _date.getPatternSetters)(), {
   a: (date, value) => {
@@ -76,7 +77,8 @@ const PATTERN_SETTERS = (0, _extend.extend)({}, (0, _date.getPatternSetters)(),
     // eslint-disable-next-line radix
     const newValue = parseInt(String(currentYear).substr(0, maxLimitLength - valueLength) + value);
     date.setFullYear(newValue);
-  }
+  },
+  x: (date) => date,
 });
 const getPatternGetter = patternChar => {
   const unsupportedCharGetter = () => patternChar;
@@ -165,7 +167,8 @@ const getLimits = (pattern, date, forcedPattern) => {
     a: {
       min: 0,
       max: 1
-    }
+    },
+	x: { min: 0, max: 0 }, // NOTE: Timezone part is read only.
   };
   // @ts-expect-error
   return limits[forcedPattern || pattern] || limits.getAmPm;
diff --git a/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js b/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js
index e14b80c40320..fb3b41601560 100644
--- a/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js
+++ b/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js
@@ -1267,6 +1267,40 @@ module('Date AM/PM Handling', setupModule, () => {
     });
 });
 
+module('TimeZone Handling', setupModule, () => {
+    test('should support \'x\' in date pattern and not generate errors (T1241387)', function(assert) {
+        try {
+            this.instance.option({
+                displayFormat: 'yyyy-MM-dd\'T\'HH:mm:ssxxx',
+                useMaskBehavior: true,
+                type: 'date',
+            });
+            assert.ok(true, 'no error shown');
+        } catch(e) {
+            assert.ok(false, 'error exists');
+        }
+    });
+
+    test('should not show error when changing timezone on runtime via up/down buttons (T1241387)', function(assert) {
+        try {
+            this.instance.option({
+                displayFormat: 'yyyy-MM-dd\'T\'HH:mm:ssxxx',
+                useMaskBehavior: true,
+                type: 'date',
+            });
+            const oldValue = this.$input.val();
+            this.keyboard.caret({ start: 20, end: 24 });
+            this.$input.focus().trigger('dxclick');
+            this.keyboard.press('up');
+
+            assert.ok(true, 'no error shown');
+            assert.strictEqual(this.$input.val(), oldValue, 'value has not been modified');
+        } catch(e) {
+            assert.ok(false, 'error exists');
+        }
+    });
+});
+
 module('Empty dateBox', {
     beforeEach: function() {
         setupModule.beforeEach.call(this);