From 0df916eef357e2a9bdb34e60c3bca2dc4577d421 Mon Sep 17 00:00:00 2001 From: Nikki Gonzales <38495263+nikkithelegendarypokemonster@users.noreply.github.com> Date: Wed, 8 Jan 2025 17:13:44 +0800 Subject: [PATCH] DateBox: fix formatting of min/max attribute in datetime picker type (T1252602) (#28681) --- .../ui/date_box/m_date_box.strategy.native.ts | 12 +++++- .../datebox.tests.js | 40 +++++++++++++++++++ 2 files changed, 50 insertions(+), 2 deletions(-) diff --git a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts index e657d3ec231e..6fba69ad8807 100644 --- a/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts +++ b/packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.native.ts @@ -67,9 +67,17 @@ const NativeStrategy = DateBoxStrategy.inherit({ }, renderInputMinMax($input) { + const type = this.dateBox.option('type'); + const defaultFormat = 'yyyy-MM-dd'; + const format = { + datetime: 'yyyy-MM-ddTHH:mm:ss', + date: defaultFormat, + time: 'HH:mm:ss', + }[type] ?? defaultFormat; + $input.attr({ - min: dateSerialization.serializeDate(this.dateBox.dateOption('min'), 'yyyy-MM-dd'), - max: dateSerialization.serializeDate(this.dateBox.dateOption('max'), 'yyyy-MM-dd'), + min: dateSerialization.serializeDate(this.dateBox.dateOption('min'), format), + max: dateSerialization.serializeDate(this.dateBox.dateOption('max'), format), }); }, }); diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js index 44d85ada1a0d..92d43566caae 100644 --- a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js +++ b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js @@ -248,6 +248,46 @@ QUnit.module('datebox tests', moduleConfig, () => { assert.equal($dropDownButton.length, expectedButtonsNumber, 'correct readOnly value'); }); + QUnit.test('Datebox should set min/max attributes to datetime input in localized datetime format (T1252602)', function(assert) { + const $dateBox = $('#dateBox').dxDateBox({ + type: 'datetime', + pickerType: 'native', + value: new Date(2024, 8, 15, 16, 54, 10), + min: new Date(2024, 8, 10, 16, 54, 14), + max: new Date(2024, 8, 27, 16, 54, 15) + }); + + const $input = $dateBox.find(`.${TEXTEDITOR_INPUT_CLASS}`); + assert.equal($input.attr('min'), '2024-09-10T16:54:14', 'minimum date set correctly'); + assert.equal($input.attr('max'), '2024-09-27T16:54:15', 'maximum date set correctly'); + }); + + QUnit.test('Datebox should set min/max attributes to time input in localized time format (T1252602)', function(assert) { + const $dateBox = $('#dateBox').dxDateBox({ + type: 'time', + pickerType: 'native', + value: new Date(2024, 8, 10, 16, 30), + min: new Date(2024, 8, 10, 12, 0, 14), + max: new Date(2024, 8, 10, 18, 0, 15) + }); + const $input = $dateBox.find(`.${TEXTEDITOR_INPUT_CLASS}`); + assert.equal($input.attr('min'), '12:00:14', 'minimum time set correctly'); + assert.equal($input.attr('max'), '18:00:15', 'maximum time set correctly'); + }); + + QUnit.test('Datebox should set min/max attributes to date input in localized date format (T1252602)', function(assert) { + const $dateBox = $('#dateBox').dxDateBox({ + type: 'date', + pickerType: 'native', + value: new Date(2024, 8, 15), + min: new Date(2024, 8, 10), + max: new Date(2024, 8, 20) + }); + const $input = $dateBox.find(`.${TEXTEDITOR_INPUT_CLASS}`); + assert.equal($input.attr('min'), '2024-09-10', 'minimum date set correctly'); + assert.equal($input.attr('max'), '2024-09-20', 'maximum date set correctly'); + }); + QUnit.test('Datebox should set min and max attributes to the native input (T258860) after option changed', function(assert) { const $dateBox = $('#dateBox').dxDateBox({ type: 'date',