FilterBuilder - Fix value formatting - T1284504 (DevExpress#30337)

Author: Tucchhaa

e2e/testcafe-devextreme/tests/filterBuilder/index.ts

@@ -1,6 +1,7 @@
 /* eslint-disable @typescript-eslint/no-misused-promises */
 import { createScreenshotsComparer } from 'devextreme-screenshot-comparer';
 import FilterBuilder from 'devextreme-testcafe-models/filterBuilder';
+import { DataType } from 'devextreme/ui/filter_builder';
 import { createWidget } from '../../helpers/createWidget';
 import url from '../../helpers/getPageUrl';
 import { fields, filter } from './data';
@@ -62,3 +63,34 @@ test('Dropdown Treeview should have no empty space', async (t) => {
     allowHierarchicalFields: true,
   });
 });
+
+[
+  { dataType: 'date', value: 1740441600000 },
+  { dataType: 'date', value: '2025-02-25T00:00:00.000Z' },
+  { dataType: 'date', value: new Date('2025-02-25T00:00:00.000Z') },
+  { dataType: 'datetime', value: 1740441600000 },
+  { dataType: 'datetime', value: '2025-02-25T00:00:00.000Z' },
+  { dataType: 'datetime', value: new Date('2025-02-25T00:00:00.000Z') },
+].forEach(({ dataType, value }) => {
+  test(`item value text should be correct for dataType: ${dataType} and valueType: ${typeof value}`, async (t) => {
+    const filterBuilder = new FilterBuilder('#container');
+
+    const date = new Date(value);
+    const dateString = date.toLocaleDateString();
+    const timeString = date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true, minute: '2-digit' });
+
+    const expectedValue = dataType === 'date' ? dateString : `${dateString}, ${timeString}`;
+
+    await t.expect(filterBuilder.getField(0).getValueText().textContent).eql(expectedValue);
+  }).before(async () => {
+    await createWidget('dxFilterBuilder', {
+      fields: [
+        {
+          dataField: 'field1',
+          dataType: dataType as DataType,
+        },
+      ],
+      value: ['field1', '=', value],
+    });
+  });
+});

packages/devextreme/js/__internal/filter_builder/m_utils.ts

@@ -6,7 +6,7 @@ import { compileGetter } from '@js/core/utils/data';
 import { Deferred, when } from '@js/core/utils/deferred';
 import { extend } from '@js/core/utils/extend';
 import { captionize } from '@js/core/utils/inflector';
-import { isDefined, isFunction } from '@js/core/utils/type';
+import { isBoolean, isDefined, isFunction } from '@js/core/utils/type';
 import formatHelper from '@js/format_helper';
 import filterUtils from '@js/ui/shared/filtering';
 import errors from '@js/ui/widget/ui.errors';
@@ -54,8 +54,21 @@ const FILTER_BUILDER_ITEM_TEXT_PART_CLASS = `${FILTER_BUILDER_ITEM_TEXT_CLASS}-p
 const FILTER_BUILDER_ITEM_TEXT_SEPARATOR_CLASS = `${FILTER_BUILDER_ITEM_TEXT_CLASS}-separator`;
 const FILTER_BUILDER_ITEM_TEXT_SEPARATOR_EMPTY_CLASS = `${FILTER_BUILDER_ITEM_TEXT_SEPARATOR_CLASS}-empty`;
 
-function getFormattedValueText(field, value) {
+function getFormattedValueText(field, value): string {
   const fieldFormat = field.format || DEFAULT_FORMAT[field.dataType];
+
+  if (isBoolean(value)) {
+    const trueText: string = field.trueText || messageLocalization.format('dxDataGrid-trueText');
+    const falseText: string = field.falseText || messageLocalization.format('dxDataGrid-falseText');
+
+    return value ? trueText : falseText;
+  }
+
+  if (field.dataType === 'date' || field.dataType === 'datetime') {
+    // value can be string or number, we need to convert it to Date object
+    return formatHelper.format(new Date(value), fieldFormat);
+  }
+
   return formatHelper.format(value, fieldFormat);
 }
 
@@ -562,21 +575,16 @@ export function getCurrentLookupValueText(field, value, handler) {
 }
 
 function getPrimitiveValueText(field, value, customOperation, target, options?) {
-  let valueText;
-  if (value === true) {
-    valueText = field.trueText || messageLocalization.format('dxDataGrid-trueText');
-  } else if (value === false) {
-    valueText = field.falseText || messageLocalization.format('dxDataGrid-falseText');
-  } else {
-    valueText = getFormattedValueText(field, value);
-  }
+  let valueText = getFormattedValueText(field, value);
+
   if (field.customizeText) {
     valueText = field.customizeText.call(field, {
       value,
       valueText,
       target,
     });
   }
+
   if (customOperation && customOperation.customizeText) {
     valueText = customOperation.customizeText.call(customOperation, {
       value,
@@ -585,6 +593,7 @@ function getPrimitiveValueText(field, value, customOperation, target, options?)
       target,
     }, options);
   }
+
   return valueText;
 }