From 8fcc55164aff9a546b5ccd8c28018fc8c3f97fd5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Tue, 21 Apr 2026 12:57:09 +0200 Subject: [PATCH 1/3] DateBox: Use localized day period names (T1327076) --- .../__internal/ui/date_box/m_date_box.mask.ts | 4 +-- .../datebox.mask.tests.js | 26 +++++++++++++++++++ 2 files changed, 27 insertions(+), 3 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts index 6dac20a98990..acb9a2646c3f 100644 --- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts +++ b/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); } diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js index 5282946e1008..ab6e3a6b9946 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js +++ b/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,31 @@ 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' + }); + + 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, () => { From 6193014f905e2d44a800eca232fa40259b7b26bd Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Wed, 22 Apr 2026 14:45:14 +0200 Subject: [PATCH 2/3] fix(datebox): isStub && Update test --- .../devextreme/js/__internal/ui/date_box/m_date_box.mask.ts | 2 +- .../tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts index acb9a2646c3f..ac995e859f80 100644 --- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts +++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.ts @@ -476,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); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js index ab6e3a6b9946..d4fb42188180 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.mask.tests.js @@ -1302,7 +1302,8 @@ module('Date AM/PM Handling', setupModule, () => { this.instance.option({ value: new Date('10/10/2012 22:00'), - displayFormat: 'a' + displayFormat: 'a', + useMaskBehavior: true, }); assert.strictEqual(this.$input.val(), pmName, 'initial value is localized PM'); From 2fea60f60cbb3f412bf33245c02a7034e9e65b99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?marker=20dao=20=C2=AE?= Date: Wed, 22 Apr 2026 15:05:40 +0200 Subject: [PATCH 3/3] fix(date_box_parts): Add empty array --- .../js/__internal/ui/date_box/m_date_box.mask.parts.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts index f22389d2aeec..10afedefdaa0 100644 --- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.mask.parts.ts +++ b/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;