[BUG] - MgtProfile - Date in card is incorrect

[JHolah]

Describe the bug Dates displayed in the Profile section of MGT Person Card may be incorrect. In the case described here, the user's birthday is out by one day (-1).

If, for example a user's birthday is set in their user profile as September 23, it is returned as September 23 in SharePoint and MS Graph data calls, and displayed correctly in all other components (e.g. custom components, SharePoint search). Only the MGT component is incorrect.

To Reproduce

1. Take a note of your browser locale (We have been testing this using GMT)
2. Go to a user's profile and make a note of their birthday
3. Navigate to a person card for that user - logging into the mgt.dev Storybook with that user will yield the bug: https://mgt.dev/?path=/story/components-mgt-person-card-html--person-card
4. Expand the card and note the birthday:

5. Note any discrepancy of the date

The date returned from MS Graph is in the format "0004-09-23". This can be tested via Graph Explorer.

When the browser time is set to GMT, the error occurs when the code attempt to create a date from that string. I believe the issue is that the date is localised in /packages/mgt-components/src/components/mgt-profile/mgt-profile.ts, line 500:

Expected behavior The user's birthday displayed in the component should match the stored data

Environment (please complete the following information):

• OS: Windows
• Browser: All
• Framework: React, SPFx
• Context: SharePoint

Additional context Note that the issue is related to localisation of dates and so the bug may not be present, or the exact offset may differ. This should be tested/confirmed using different locales.

[Rafaelki]

Hello team, I wanted to kindly ask if there has been any progress on resolving this issue. Our Europe-based clients are experiencing this issue, and any update would be greatly appreciated.

[Rafaelki]

As highlighted by @JHolah the issue seems to be in /packages/mgt-components/src/components/mgt-profile/mgt-profile.ts, line 500 in the getDisplayDate function.

I believe the timeZone: "UTC" option is needed, so the code should look like this:

  private getDisplayDate(date: Date): string {
    return date.toLocaleString('default', {
      day: 'numeric',
      month: 'long',
      timeZone: "UTC"
    });
  }