Global format config. Implementation for dateFormat, dateTimeFormat, NumberFormat

Author: GoodDayForSurf

packages/devextreme/js/__internal/scheduler/appointments_new/utils/get_date_text.ts

@@ -1,8 +1,29 @@
 import dateLocalization from '@js/common/core/localization/date';
 import dateUtils from '@js/core/utils/date';
+import { getGlobalFormatByDataType } from '@ts/core/m_global_format_config';
 
 import type { TargetedAppointment, ViewType } from '../../types';
 
+const formatTooltipDatePart = (date: Date): string => {
+  const globalFormat = getGlobalFormatByDataType('date');
+
+  if (globalFormat) {
+    return dateLocalization.format(date, globalFormat) as string;
+  }
+
+  return String(dateLocalization.format(date, 'monthandday'));
+};
+
+const formatTooltipTimePart = (date: Date): string => {
+  const globalFormat = getGlobalFormatByDataType('time');
+
+  if (globalFormat) {
+    return dateLocalization.format(date, globalFormat) as string;
+  }
+
+  return String(dateLocalization.format(date, 'shorttime'));
+};
+
 export enum DateFormatType {
   DATETIME = 'DATETIME',
   TIME = 'TIME',
@@ -25,24 +46,22 @@ export const getDateFormatType = (
 };
 
 export const getDateText = (startDate: Date, endDate: Date, formatType: DateFormatType): string => {
-  const dateFormat = 'monthandday';
-  const timeFormat = 'shorttime';
   const isSameDate = dateUtils.sameDate(startDate, endDate);
 
   switch (formatType) {
     case DateFormatType.DATETIME:
       return [
-        dateLocalization.format(startDate, dateFormat),
+        formatTooltipDatePart(startDate),
         ' ',
-        dateLocalization.format(startDate, timeFormat),
+        formatTooltipTimePart(startDate),
         ' - ',
-        isSameDate ? '' : `${dateLocalization.format(endDate, dateFormat)} `,
-        dateLocalization.format(endDate, timeFormat),
+        isSameDate ? '' : `${formatTooltipDatePart(endDate)} `,
+        formatTooltipTimePart(endDate),
       ].join('');
     case DateFormatType.TIME:
-      return `${dateLocalization.format(startDate, timeFormat)} - ${dateLocalization.format(endDate, timeFormat)}`;
+      return `${formatTooltipTimePart(startDate)} - ${formatTooltipTimePart(endDate)}`;
     case DateFormatType.DATE:
-      return `${dateLocalization.format(startDate, dateFormat)}${isSameDate ? '' : ` - ${dateLocalization.format(endDate, dateFormat)}`}`;
+      return `${formatTooltipDatePart(startDate)}${isSameDate ? '' : ` - ${formatTooltipDatePart(endDate)}`}`;
     default:
       return '';
   }

packages/devextreme/testing/tests/DevExpress.ui.widgets.scheduler/integration.appointmentTooltip.tests.js

@@ -39,12 +39,26 @@ const moduleConfig = {
 module('Global formatting config (spec): Scheduler tooltip', {
     beforeEach() {
         fx.off = true;
-        this.originalConfig = config();
+        const globalConfig = config();
+        this.savedGlobalFormats = {
+            dateFormat: globalConfig.dateFormat,
+            timeFormat: globalConfig.timeFormat,
+            dateTimeFormat: globalConfig.dateTimeFormat,
+            numberFormat: globalConfig.numberFormat,
+        };
     },
     afterEach() {
         fx.off = false;
         hide();
-        config(this.originalConfig);
+        const globalConfig = config();
+        Object.keys(this.savedGlobalFormats).forEach((key) => {
+            const value = this.savedGlobalFormats[key];
+            if(value === undefined) {
+                delete globalConfig[key];
+            } else {
+                globalConfig[key] = value;
+            }
+        });
     }
 }, () => {
     const createScheduler = (options) => createWrapper($.extend({
@@ -60,7 +74,7 @@ module('Global formatting config (spec): Scheduler tooltip', {
 
     test('implicit Scheduler tooltip time format uses global timeFormat', async function(assert) {
         config({
-            ...this.originalConfig,
+            ...config(),
             timeFormat: (date) => `T${date.getHours()}`,
         });
 
@@ -83,7 +97,7 @@ module('Global formatting config (spec): Scheduler tooltip', {
 
     test('implicit Scheduler tooltip date/time use global dateFormat and timeFormat', async function(assert) {
         config({
-            ...this.originalConfig,
+            ...config(),
             dateFormat: (date) => `D${date.getDate()}`,
             timeFormat: (date) => `T${date.getHours()}`,
         });