From 97f456a1b721e5821979c03649f3c07d6e63a049 Mon Sep 17 00:00:00 2001 From: alep85 Date: Thu, 9 Jan 2025 15:09:59 +0100 Subject: [PATCH] AAE-29897 Add timezone as adfLocalizedDate pipe argument to allow to remove timezone-specific shifts --- docs/core/pipes/localized-date.pipe.md | 28 +++++++++++++++++++ .../src/lib/pipes/localized-date.pipe.spec.ts | 16 +++++++++++ lib/core/src/lib/pipes/localized-date.pipe.ts | 4 +-- 3 files changed, 46 insertions(+), 2 deletions(-) diff --git a/docs/core/pipes/localized-date.pipe.md b/docs/core/pipes/localized-date.pipe.md index 1399bd9f203..acf60220693 100644 --- a/docs/core/pipes/localized-date.pipe.md +++ b/docs/core/pipes/localized-date.pipe.md @@ -22,6 +22,7 @@ Converts a date to a given format and locale. |--------|--------|---------------|-------------------------------------------------------------------------------------------------------------------------| | format | string | 'medium' | A format to apply to the date value. [Date Pipe Formats.](https://angular.io/api/common/DatePipe#custom-format-options) | | locale | string | 'en-US' | A locale id for the locale format rules to use. | +| timezone | string | |(optional) A timezone offset (such as `'+0430'`), or a standard UTC/GMT | ## Details @@ -59,3 +60,30 @@ You can overwrite the default values of this pipe by adding these properties to | defaultLocale | string | The locale id to apply | This configuration overwrites the values in the [localized date pipe](../../core/pipes/localized-date.pipe.md) as well as other components to have more consistency across your app. However, you can still overwrite these values any time by using the pipe in your code. + + +### Eliminates timezone-specific shifts + +When timezone is set to UTC, it eliminates timezone-specific shifts, meaning the date will be displayed in Coordinated Universal Time (UTC) regardless of the local timezone. + +Given the date `2025-01-09T00:00:00.000+0000`, if the local timezone has a negative offset like -6 hours, the local time would be `2025-01-08T18:00:00.000-0600`. Without setting the timezone to UTC, the pipe would display the date as `January 8th, 2025`, because the local time is still on the previous day. + +By setting the timezone to `UTC` in the pipe, the date will be displayed as `January 9th, 2025`, because it ignores the local timezone offset and uses the UTC time instead. + +Usage example: + +```HTML + +
+ Created date: {{ '2025-01-09T00:00:00.000+0000' | adfLocalizedDate: 'mediumDate' }} + +
+ + +
+ Created date: {{ '2025-01-09T00:00:00.000+0000' | adfLocalizedDate: 'mediumDate' : '' : 'UTC' }} + +
+``` + +By specifying `UTC` as the timezone, the pipe ensures that the date is displayed consistently in UTC, eliminating any discrepancies caused by local timezone offsets. diff --git a/lib/core/src/lib/pipes/localized-date.pipe.spec.ts b/lib/core/src/lib/pipes/localized-date.pipe.spec.ts index 95b7a36eb9b..11c5297f926 100644 --- a/lib/core/src/lib/pipes/localized-date.pipe.spec.ts +++ b/lib/core/src/lib/pipes/localized-date.pipe.spec.ts @@ -65,4 +65,20 @@ describe('LocalizedDatePipe', () => { const format = 'longDate'; expect(pipe.transform(date, format, locale)).toBe('3 juillet 1990'); }); + + it("should return the previous day's date when local timezone has a negative offset", () => { + const date = new Date('2025-01-09T00:00:00.000Z'); + const locale = 'en-US'; + const format = 'mediumDate'; + const timezone = 'UTC-6'; + expect(pipe.transform(date, format, locale, timezone)).toBe('Jan 8, 2025'); + }); + + it('should return the provided date when local timezone is set to UTC', () => { + const date = new Date('2025-01-09T00:00:00.000Z'); + const locale = 'en-US'; + const format = 'mediumDate'; + const timezone = 'UTC'; + expect(pipe.transform(date, format, locale, timezone)).toBe('Jan 9, 2025'); + }); }); diff --git a/lib/core/src/lib/pipes/localized-date.pipe.ts b/lib/core/src/lib/pipes/localized-date.pipe.ts index 0364941dbda..2f0af367216 100644 --- a/lib/core/src/lib/pipes/localized-date.pipe.ts +++ b/lib/core/src/lib/pipes/localized-date.pipe.ts @@ -53,10 +53,10 @@ export class LocalizedDatePipe implements PipeTransform, OnDestroy { } } - transform(value: Date | string | number, format?: string, locale?: string): string { + transform(value: Date | string | number, format?: string, locale?: string, timezone?: string): string { const actualFormat = format || this.defaultFormat; const actualLocale = locale || this.defaultLocale; - const datePipe = new DatePipe(actualLocale); + const datePipe = timezone ? new DatePipe(actualLocale, timezone) : new DatePipe(actualLocale); return datePipe.transform(value, actualFormat); }