Support date serialization formats for DateBox with list picker type …

…(T854579) (#11695)

js/ui/date_box/ui.date_box.strategy.list.js

@@ -8,6 +8,7 @@ const isDate = require('../../core/utils/type').isDate;
 const extend = require('../../core/utils/extend').extend;
 const dateUtils = require('./ui.date_utils');
 const dateLocalization = require('../../localization/date');
+const dateSerialization = require('../../core/utils/date_serialization');
 
 const DATE_FORMAT = 'date';
 
@@ -231,7 +232,11 @@ const ListStrategy = DateBoxStrategy.inherit({
         const day = itemData.getDate();
 
         if(date) {
-            date = new Date(date);
+            if(this.dateBox.option('dateSerializationFormat')) {
+                date = dateSerialization.deserializeDate(date);
+            } else {
+                date = new Date(date);
+            }
 
             date.setHours(hours);
             date.setMinutes(minutes);

testing/tests/DevExpress.ui.widgets.editors/datebox.tests.js

@@ -3610,6 +3610,22 @@ QUnit.module('datebox w/ time list', {
         const $timeListItems = $('.dx-list .dx-list-item');
         assert.ok($timeListItems.length > 0);
     });
+
+    QUnit.test('should works correctly with serialized dates (T854579)', function(assert) {
+        this.dateBox.option({
+            opened: true,
+            dateSerializationFormat: 'yyyy-MM-ddTHH:mm:ssx',
+        });
+        const $input = $(this.dateBox.element()).find(`.${TEXTEDITOR_INPUT_CLASS}`);
+        const $items = $(this.dateBox.content()).find(LIST_ITEM_SELECTOR);
+
+        $items.eq(1).trigger('dxclick');
+        assert.strictEqual($input.val(), $items.eq(1).text(), 'time is applied');
+
+        this.dateBox.open();
+        $items.eq(3).trigger('dxclick');
+        assert.strictEqual($input.val(), $items.eq(3).text(), 'new time is applied');
+    });
 });
 
 QUnit.module('keyboard navigation', {