Merge pull request #114 from formio/FIO-8477-fix-dayjs-timezones

FIO-8477: Fix the timezones issue in formatDate function

src/utils/__tests__/date.test.ts

@@ -0,0 +1,29 @@
+import { expect } from 'chai';
+import { formatDate } from '../date';
+
+describe('Test Date Utils', () => {
+  it('Should format date without timezone correctly', () => {
+    const value = '2023-04-01T12:00:00Z';
+    const format = 'YYYY-MM-DD';
+    const expected = '2023-04-01';
+    expect(formatDate(value, format)).to.equal(expected);
+  });
+
+  it('Should format date in UTC timezone correctly', () => {
+    const value = '2023-04-01T12:00:00Z';
+    const format = 'YYYY-MM-DD HH:mm:ss';
+    const timezone = 'UTC';
+    const expected = '2023-04-01 12:00:00 UTC';
+    expect(formatDate(value, format, timezone)).to.equal(expected);
+  });
+
+  it('Should format date in a specific timezone correctly', () => {
+    const value = '2023-04-01T12:00:00Z';
+    const format = 'YYYY-MM-DD HH:mm:ss';
+    expect(formatDate(value, format, 'America/New_York')).to.equal('2023-04-01 08:00:00 EDT');
+    // TODO: Fix expected value when dayjs issue is resolved
+    // https://github.com/iamkun/dayjs/issues/1154
+    // expect(formatDate(value, format, 'Europe/London')).to.equal('2023-04-01 13:00:00 BST');
+    expect(formatDate(value, format, 'Europe/London')).to.equal('2023-04-01 13:00:00 GMT+1');
+  });
+});

src/utils/date.ts

@@ -1,12 +1,15 @@
-import dayjs from 'dayjs';
+import dayjs, { ConfigType } from 'dayjs';
 import timezone from 'dayjs/plugin/timezone';
 import utc from 'dayjs/plugin/utc';
+import advancedFormat from 'dayjs/plugin/advancedFormat';
 import customParseFormat from 'dayjs/plugin/customParseFormat';
 import { isNaN, isNil } from 'lodash';
 import { Evaluator } from './Evaluator';
 import { DayComponent } from 'types';
+
 dayjs.extend(utc);
 dayjs.extend(timezone);
+dayjs.extend(advancedFormat);
 dayjs.extend(customParseFormat);
 
 /**
@@ -64,15 +67,17 @@ export function momentDate(value: any, format: any, timezone: any): any {
  * @param timezone
  * @return {string}
  */
-export function formatDate(value: any, format: any, timezone: any): string {
-    const momentDate = dayjs(value);
+export function formatDate(value: ConfigType, format: string, timezone?: string): string {
+    const date = dayjs(value);
+    const dayjsFormat = convertFormatToMoment(format);
+
     if (timezone === 'UTC') {
-        return `${dayjs.utc().format(convertFormatToMoment(format))} UTC`;
+        return `${date.utc().format(dayjsFormat)} UTC`;
     }
     if (timezone) {
-        return momentDate.tz(timezone).format(`${convertFormatToMoment(format)} z`);
+        return date.tz(timezone).format(`${dayjsFormat} z`);
     }
-    return momentDate.format(convertFormatToMoment(format));
+    return date.format(dayjsFormat);
 }
 
 /**