DateBox: Use localized day period names (T1327076) (#33367)

Co-authored-by: marker dao ® <youdontknow@marker-dao.eth>

Author: marker-dao

packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts

@@ -89,7 +89,7 @@ const getPatternGetter = (patternChar) => {
 };
 
 export const renderDateParts = (text, regExpInfo) => {
-  const result = regExpInfo.regexp.exec(text);
+  const result = regExpInfo.regexp.exec(text) ?? [];
 
   let start = 0;
   let end = 0;

packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts

@@ -1,6 +1,5 @@
 import eventsEngine from '@js/common/core/events/core/events_engine';
 import { addNamespace, isCommandKeyPressed, normalizeKeyName } from '@js/common/core/events/utils/index';
-import defaultDateNames from '@js/common/core/localization/default_date_names';
 import { getFormat } from '@js/common/core/localization/ldml/date.format';
 import { getRegExpInfo } from '@js/common/core/localization/ldml/date.parser';
 import numberLocalization from '@js/common/core/localization/number';
@@ -132,8 +131,7 @@ class DateBoxMask extends DateBoxBase {
 
   _toggleAmPm(): void {
     const currentValue = this._getActivePartProp('text');
-    // @ts-expect-error ts-error
-    const indexOfCurrentValue = defaultDateNames.getPeriodNames().indexOf(currentValue);
+    const indexOfCurrentValue = dateLocalization.getPeriodNames().indexOf(currentValue);
     const newValue = indexOfCurrentValue ^ 1;
     this._setActivePartValue(newValue);
   }
@@ -478,7 +476,7 @@ class DateBoxMask extends DateBoxBase {
     }
     // @ts-expect-error ts-error
     let index = fitIntoRange(this._activePartIndex + step, 0, this._dateParts.length - 1);
-    if (this._dateParts[index].isStub) {
+    if (this._dateParts[index]?.isStub) {
       const isBoundaryIndex = index === 0 && step < 0 || index === this._dateParts.length - 1 && step > 0;
       if (!isBoundaryIndex) {
         this._selectNextPart(step >= 0 ? step + 1 : step - 1);

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js

@@ -7,6 +7,7 @@ import pointerMock from '../../helpers/pointerMock.js';
 import 'ui/date_box';
 import keyboardMock from '../../helpers/keyboardMock.js';
 import devices from '__internal/core/m_devices';
+import localization from 'localization';
 
 const { test, module } = QUnit;
 
@@ -1290,6 +1291,32 @@ module('Date AM/PM Handling', setupModule, () => {
             assert.strictEqual(this.$input.val(), 'PM');
         });
     });
+
+    test('up/down arrows should continue to switch AM/PM on subsequent presses when locale has localized period names (T1327076)', function(assert) {
+        const defaultLocale = localization.locale();
+
+        try {
+            localization.locale('es-ES');
+
+            const [amName, pmName] = dateLocalization.getPeriodNames();
+
+            this.instance.option({
+                value: new Date('10/10/2012 22:00'),
+                displayFormat: 'a',
+                useMaskBehavior: true,
+            });
+
+            assert.strictEqual(this.$input.val(), pmName, 'initial value is localized PM');
+
+            this.keyboard.press('up');
+            assert.strictEqual(this.$input.val(), amName, 'value changed to localized AM after first press');
+
+            this.keyboard.press('up');
+            assert.strictEqual(this.$input.val(), pmName, 'value returned to localized PM after second press');
+        } finally {
+            localization.locale(defaultLocale);
+        }
+    });
 });
 
 module('TimeZone Handling', setupModule, () => {