Merge pull request #481 from equinor/feat/pass-in-utc-and-return-it

✨ added option to get date with utc timezone instead of loca…

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/amplify-components",
-  "version": "7.1.11",
+  "version": "7.2.0",
   "description": "Frontend Typescript components for the Amplify team",
   "main": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",

src/utils/date.test.ts

@@ -438,3 +438,34 @@ test('isBetweenDates works as expected with todays date between itself', () => {
   const formatted = date.isBetweenDates(today, [today, today]);
   expect(formatted).toEqual(true);
 });
+describe('UTC timestamps', () => {
+  const utcDate = '2021-06-30T22:00:00+00:00';
+  test('should accept UTC timestamps and get that date back in UTC in the format of DD. month YYYY', () => {
+    const formatted = date.formatDate(utcDate, {
+      format: 'DD. month YYYY',
+      useUTC: true,
+    });
+    expect(formatted).toEqual('30. June 2021');
+  });
+  test('should accept UTC timestamps and get that date back in UTC in the format of DD. month', () => {
+    const formatted = date.formatDate(utcDate, {
+      format: 'DD. month',
+      useUTC: true,
+    });
+    expect(formatted).toEqual('30. June');
+  });
+  test('should accept UTC timestamps and get that date back in UTC in the format of YYYY-MM-DD', () => {
+    const formatted = date.formatDate(utcDate, {
+      format: 'YYYY-MM-DD',
+      useUTC: true,
+    });
+    expect(formatted).toEqual('2021-06-30');
+  });
+  test('should accept UTC timestamps and get that date back in UTC in the format of DD.MM.YY', () => {
+    const formatted = date.formatDate(utcDate, {
+      format: 'DD.MM.YY',
+      useUTC: true,
+    });
+    expect(formatted).toEqual('30.06.21');
+  });
+});

src/utils/date.ts

@@ -12,25 +12,39 @@ const formatDate = (
       | 'DD.MM.YY'
       | 'DD. month';
     month?: 'short' | 'long';
+    useUTC?: boolean;
   }
 ): string => {
   if (date) {
     const dateObj = new Date(date);
     if (dateObj.getTime()) {
       if (options?.format === 'DD. month YYYY') {
-        const day = dateObj.toLocaleDateString('en-GB', { day: 'numeric' });
+        const day = dateObj.toLocaleDateString('en-GB', {
+          day: 'numeric',
+          timeZone: options.useUTC ? 'UTC' : undefined,
+        });
         return `${day}. ${dateObj.toLocaleString('en-GB', {
           month: options?.month ?? 'long',
           year: 'numeric',
+          timeZone: options.useUTC ? 'UTC' : undefined,
         })}`;
       }
-      const day = dateObj.getDate();
-      const month = dateObj.getMonth() + 1;
-      const year = dateObj.getFullYear();
+
+      const day = options?.useUTC ? dateObj.getUTCDate() : dateObj.getDate();
+      const month = options?.useUTC
+        ? dateObj.getUTCMonth() + 1
+        : dateObj.getMonth() + 1;
+      const year = options?.useUTC
+        ? dateObj.getUTCFullYear()
+        : dateObj.getFullYear();
       if (options?.format === 'DD. month') {
-        const day = dateObj.toLocaleDateString('en-GB', { day: 'numeric' });
+        const day = dateObj.toLocaleDateString('en-GB', {
+          day: 'numeric',
+          timeZone: options.useUTC ? 'UTC' : undefined,
+        });
         return `${day}. ${dateObj.toLocaleString('en-GB', {
           month: options.month ?? 'long',
+          timeZone: options.useUTC ? 'UTC' : undefined,
         })}`;
       }
       if (options?.format === 'YYYY-MM-DD') {