feat(components/datetime): add support for additional date formats to…

… `SkyDatePipe` (#2447) (#2469)
blackbaud · Jul 11, 2024 · 4564fcf · 4564fcf
1 parent ae58426
commit 4564fcf
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 11 deletions.
diff --git a/libs/components/datetime/src/lib/modules/date-pipe/date.service.spec.ts b/libs/components/datetime/src/lib/modules/date-pipe/date.service.spec.ts
@@ -114,12 +114,30 @@ describe('Date service', () => {
   });
 
   it('should support Angular DatePipe formats', () => {
-    const value = service.format(new Date(2000, 0, 1), undefined, 'fullDate');
-    const expectedValues = [
-      'Saturday, January 1, 2000',
-      'Saturday, January 01, 2000', // IE 11
-    ];
-    expect(expectedValues).toContain(value);
+    const date = new Date();
+    const formatSpy = spyOn(SkyIntlDateFormatter, 'format');
+
+    /* spell-checker:disable */
+    const formats = new Map([
+      ['short', 'yMdjm'],
+      ['medium', 'yMMMdjms'],
+      ['long', 'MMMM d, y, h:mm:ss a Z'],
+      ['full', 'EEEE, MMMM d, y, h:mm:ss a z'],
+      ['shortDate', 'yMd'],
+      ['mediumDate', 'yMMMd'],
+      ['longDate', 'yMMMMd'],
+      ['fullDate', 'yMMMMEEEEd'],
+      ['shortTime', 'jm'],
+      ['mediumTime', 'jms'],
+      ['longTime', 'h:mm:ss a Z'],
+      ['fullTime', 'h:mm:ss a z'],
+    ]);
+    /* spell-checker:enable */
+
+    for (const [formatName, formatExpression] of formats) {
+      service.format(date, undefined, formatName);
+      expect(formatSpy).toHaveBeenCalledWith(date, 'en-US', formatExpression);
+    }
   });
 
   it('should default to mediumDate format', () => {

diff --git a/libs/components/datetime/src/lib/modules/date-pipe/date.service.ts b/libs/components/datetime/src/lib/modules/date-pipe/date.service.ts
@@ -21,15 +21,33 @@ import { takeUntil } from 'rxjs/operators';
 })
 export class SkyDateService implements OnDestroy {
   /* spell-checker:disable */
+  // See: https://github.com/angular/angular/blob/17.3.x/packages/common/src/pipes/date_pipe.ts
+  // See: https://www.ibm.com/docs/en/app-connect/11.0.0?topic=function-formatting-parsing-datetimes-as-strings
   #ALIASES: Record<string, string> = {
-    medium: 'yMMMdjms',
+    // TODO: replace with 'M/d/yy, h:mm a' in a breaking change.
     short: 'yMdjm',
-    fullDate: 'yMMMMEEEEd',
-    longDate: 'yMMMMd',
-    mediumDate: 'yMMMd',
+    // TODO: replace with 'MMM d, y, h:mm:ss a' in a breaking change.
+    medium: 'yMMMdjms',
+    // TODO: This format was modified from 'MMMM d, y, h:mm:ss a z' due to the limitations of the Intl API.
+    long: 'MMMM d, y, h:mm:ss a Z',
+    // TODO: This format was modified from 'EEEE, MMMM d, y, h:mm:ss a zzzz' due to the limitations of the Intl API.
+    full: 'EEEE, MMMM d, y, h:mm:ss a z',
+    // TODO: Replace with 'M/d/yy' in a breaking change.
     shortDate: 'yMd',
-    mediumTime: 'jms',
+    // TODO: Replace with 'MMM d, y' in a breaking change.
+    mediumDate: 'yMMMd',
+    // TODO: Replace with 'MMMM d, y' in a breaking change.
+    longDate: 'yMMMMd',
+    // TODO: Replace with 'EEEE, MMMM d, y' in a breaking change.
+    fullDate: 'yMMMMEEEEd',
+    // TODO: Replace with 'h:mm a' in a breaking change.
     shortTime: 'jm',
+    // TODO: Replace with 'h:mm:ss a' in a breaking change.
+    mediumTime: 'jms',
+    // TODO: This format was modified from 'h:mm:ss a z' due to the limitations of the Intl API.
+    longTime: 'h:mm:ss a Z',
+    // TODO: This format was modified from 'h:mm:ss a zzzz' due to the limitations of the Intl API.
+    fullTime: 'h:mm:ss a z',
   };
   /* spell-checker:enable */