react-intl FormattedDate component giving Invalid Date changed to en-GB locale

Viewed 23

I have my date formatted like this

let formattedDate = new Date(updated_at).toLocaleDateString('en-US', { timeZone: 'UTC' })

Then I have the FormattedDate component from 'react-intl' package used like this

<FormattedDate value={formattedDate} />

Then It renders the formattedDate value like this on the browser(MM/DD/YYY)

enter image description here

Now I'd like to change it to en-GB date format(DD/MM/YYYY) so I did this,

let formattedDate = new Date(updated_at).toLocaleDateString('en-GB', { timeZone: 'UTC' })

But then I get invalid date on my table after that, but some of the rows render with date with now the correct format I wanted.

enter image description here

Here are the errors by the way in the browser console.

Error: [@formatjs/intl Error FORMAT_ERROR] Error formatting date. 

    Invalid time value
    RangeError: Invalid time value
        at formatDate (dateTime.js:50:1)

And If I console.log those problem dates before being formatted, just in their raw form here they are:

2022-09-22T06:52:32.870184Z
2022-09-22T03:04:54.983147Z
2022-09-20T08:09:22.845208Z

Weird though, if I console.log those three using this my line of code

let formattedDate = new Date(updated_at).toLocaleDateString('en-GB', { timeZone: 'UTC' })

Then I'll get a proper value

22/09/2022

So, I'm really stuck how to fix this, as the other dates can be formatted correctly with my approach, but the first three dates on my table won't. Though they are the same in format as I can tell. Thanks in advance for any help.

0 Answers
Related