date/time formatting priority fixes

Author: ajivanyandev

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

@@ -15,6 +15,7 @@ import formatHelper from '@js/format_helper';
 import type { CustomOperation, DataType, Field } from '@js/ui/filter_builder';
 import filterUtils from '@js/ui/shared/filtering';
 import errors from '@js/ui/widget/ui.errors';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 
 import { getConfig } from './m_between';
 import filterOperationsDictionary from './m_filter_operations_dictionary';
@@ -62,7 +63,8 @@ const FILTER_BUILDER_ITEM_TEXT_SEPARATOR_CLASS = `${FILTER_BUILDER_ITEM_TEXT_CLA
 const FILTER_BUILDER_ITEM_TEXT_SEPARATOR_EMPTY_CLASS = `${FILTER_BUILDER_ITEM_TEXT_SEPARATOR_CLASS}-empty`;
 
 function getDateFormat(dataType: DataType | undefined): Format | undefined {
-  return dataType ? DEFAULT_FORMAT[dataType] : undefined;
+  if (!dataType) return undefined;
+  return getGlobalFormatByDataType(dataType) ?? DEFAULT_FORMAT[dataType];
 }
 
 function getFormattedValueText(field: Field, value: FieldValue): string {

packages/devextreme/js/__internal/grids/pivot_grid/m_widget_utils.ts

@@ -10,6 +10,7 @@ import { extend } from '@js/core/utils/extend';
 import { each, map } from '@js/core/utils/iterator';
 import { isDefined, isNumeric, type } from '@js/core/utils/type';
 import formatHelper from '@js/format_helper';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 
 import { CLASSES } from './const';
 
@@ -297,7 +298,8 @@ const DATE_INTERVAL_FORMATS = {
 function setDefaultFieldValueFormatting(field) {
   if (field.dataType === 'date') {
     if (!field.format) {
-      setFieldProperty(field, 'format', DATE_INTERVAL_FORMATS[field.groupInterval]);
+      const dateIntervalFormat = DATE_INTERVAL_FORMATS[field.groupInterval];
+      setFieldProperty(field, 'format', dateIntervalFormat ?? getGlobalFormatByDataType('date'));
     }
   } else if (field.dataType === 'number') {
     const groupInterval = isNumeric(field.groupInterval)

packages/devextreme/js/__internal/ui/chat/chat.ts

@@ -23,6 +23,7 @@ import type {
   TypingEndEvent,
   TypingStartEvent,
 } from '@js/ui/chat';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 import { invokeConditionally } from '@ts/core/utils/conditional_invoke';
 import type { OptionChanged } from '@ts/core/widget/types';
 import Widget from '@ts/core/widget/widget';
@@ -92,7 +93,7 @@ class Chat extends Widget<ChatProperties> {
       activeStateEnabled: true,
       alerts: [],
       dataSource: null,
-      dayHeaderFormat: 'shortdate',
+      dayHeaderFormat: getGlobalFormatByDataType('date') ?? 'shortdate',
       editing: {
         allowUpdating: false,
         allowDeleting: false,
@@ -104,7 +105,7 @@ class Chat extends Widget<ChatProperties> {
       inputFieldText: '',
       items: [],
       messageTemplate: null,
-      messageTimestampFormat: 'shorttime',
+      messageTimestampFormat: getGlobalFormatByDataType('time') ?? 'shorttime',
       reloadOnChange: true,
       showAvatar: true,
       showDayHeaders: true,

packages/devextreme/js/__internal/ui/date_box/m_date_box.strategy.list.ts

@@ -10,6 +10,7 @@ import { getWindow } from '@js/core/utils/window';
 import type { DxEvent } from '@js/events';
 import type { Format } from '@js/localization';
 import type { ItemClickEvent } from '@js/ui/list';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 import { getSizeValue } from '@ts/ui/drop_down_editor/m_utils';
 import List from '@ts/ui/list/list.edit.search';
 
@@ -59,8 +60,9 @@ class ListStrategy extends DateBoxStrategy {
   }
 
   getDisplayFormat(displayFormat?: Format): Format {
+    const globalTimeFormat = getGlobalFormatByDataType('time');
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-    return displayFormat || 'shorttime';
+    return displayFormat || globalTimeFormat || 'shorttime';
   }
 
   popupConfig(popupConfig: PopupProperties): PopupProperties {

packages/devextreme/js/__internal/ui/gantt/ui.gantt.dialogs.ts

@@ -6,6 +6,7 @@ import '@ts/ui/list/modules/deleting';
 
 import dateLocalization from '@js/common/core/localization/date';
 import messageLocalization from '@js/common/core/localization/message';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 import Form from '@ts/ui/form/form';
 import Popup from '@ts/ui/popup/m_popup';
 
@@ -335,7 +336,9 @@ class TaskEditDialogInfo extends DialogInfoBase {
 
   // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
   _getFormattedDateText(date) {
-    return date ? dateLocalization.format(date, 'shortDateShortTime') : '';
+    if (!date) return '';
+    const globalFormat = getGlobalFormatByDataType('datetime');
+    return dateLocalization.format(date, globalFormat ?? 'shortDateShortTime');
   }
 
   _isReadOnlyField(field): boolean {

packages/devextreme/js/__internal/ui/gantt/ui.gantt.view.ts

@@ -9,6 +9,7 @@ import messageLocalization from '@js/common/core/localization/message';
 import $ from '@js/core/renderer';
 import { format } from '@js/core/utils/string';
 import { isDefined } from '@js/core/utils/type';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 import type { WidgetProperties } from '@ts/core/widget/widget';
 import Widget from '@ts/core/widget/widget';
 import { getGanttViewCore } from '@ts/ui/gantt/gantt_importer';
@@ -565,10 +566,15 @@ export class GanttView extends Widget<GanttViewProperties> {
   getFormattedDateText(date): string {
     let result = '';
     if (date) {
-      const datePart = dateLocalization.format(date, 'shortDate');
-      const timeFormat = this._hasAmPM() ? 'hh:mm a' : 'HH:mm';
-      const timePart = dateLocalization.format(date, timeFormat);
-      result = `${datePart} ${timePart}`;
+      const globalDateTimeFormat = getGlobalFormatByDataType('datetime');
+      if (globalDateTimeFormat) {
+        result = dateLocalization.format(date, globalDateTimeFormat);
+      } else {
+        const datePart = dateLocalization.format(date, 'shortDate');
+        const timeFormat = this._hasAmPM() ? 'hh:mm a' : 'HH:mm';
+        const timePart = dateLocalization.format(date, timeFormat);
+        result = `${datePart} ${timePart}`;
+      }
     }
     return result;
   }

packages/devextreme/js/__internal/ui/number_box/m_number_box.base.ts

@@ -3,6 +3,7 @@ import {
   addNamespace, getChar, isCommandKeyPressed, normalizeKeyName,
 } from '@js/common/core/events/utils/index';
 import messageLocalization from '@js/common/core/localization/message';
+import numberLocalization from '@js/common/core/localization/number';
 import devices from '@js/core/devices';
 import domAdapter from '@js/core/dom_adapter';
 import type { DefaultOptionsRule } from '@js/core/options/utils';
@@ -17,6 +18,7 @@ import {
 import { Deferred } from '@js/core/utils/deferred';
 import { fitIntoRange, inRange } from '@js/core/utils/math';
 import { isDefined } from '@js/core/utils/type';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 import TextEditor from '@ts/ui/text_box/m_text_editor';
 
 import type { TextEditorBaseProperties } from '../text_box/m_text_editor.base';
@@ -218,12 +220,25 @@ class NumberBoxBase<
   _forceValueRender(): void {
     const value = this.option('value');
     const number = Number(value);
-    const formattedValue = isNaN(number) ? '' : this._applyDisplayValueFormatter(value);
+    const formattedValue = isNaN(number)
+      ? ''
+      : this._applyDisplayValueFormatter(value);
 
     this._renderDisplayText(formattedValue);
   }
 
   _applyDisplayValueFormatter(value): string | undefined {
+    if (!this.option('format')) {
+      const globalNumberFormat = getGlobalFormatByDataType('number');
+
+      if (globalNumberFormat) {
+        return numberLocalization.format(
+          Number(value),
+          globalNumberFormat,
+        ) as string;
+      }
+    }
+
     const { displayValueFormatter } = this.option();
 
     return displayValueFormatter?.(value);