Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AAE-29897 Fix Process Instance Variables UI shows date values one day in the past #10541

Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions docs/core/pipes/localized-date.pipe.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
<!-- Local timezone with -6 offset -->
<div>
Created date: {{ '2025-01-09T00:00:00.000+0000' | adfLocalizedDate: 'mediumDate' }}
<!-- Output: Jan 8, 2025 (if local timezone is -6) -->
</div>

<!-- Setting timezone to UTC -->
<div>
Created date: {{ '2025-01-09T00:00:00.000+0000' | adfLocalizedDate: 'mediumDate' : '' : 'UTC' }}
<!-- Output: Jan 9, 2025 (UTC) -->
</div>
```

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.
16 changes: 16 additions & 0 deletions lib/core/src/lib/pipes/localized-date.pipe.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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');
});
});
4 changes: 2 additions & 2 deletions lib/core/src/lib/pipes/localized-date.pipe.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}

Expand Down
Loading