React showing one day older date

I am using different timezone in laravel:

'timezone' => env('TIME_ZONE', 'America/Los_Angeles'),

and works fine on laravel. But on SPA, react which is inside laravel, it is showing one day older. And, it looks like the issue with timezone, since react is processing this date on default timeone.

What would be the best and easiest way to handle this. Basically, on react I am using something like:

new Date(item.release_date)

and somewhere as :

moment(input.release_date).format( "YYYY-MM-DD");

drehimself

4 years ago

Level 35

Try leaving the timezone in Laravel to UTC and once the date is parsed on the frontend, it should do the timezone conversions automatically and show the correct time.

Alternatively, you can use the toJson() method on Carbon to convert a date to UTC, then pass it into your frontend.

$date = Carbon\Carbon::now()->toJSON();
// 2022-04-19T17:27:44.244333Z the "Z" means "UTC"

On the frontend when you do new Date('2022-04-19T17:27:44.244333Z') it should convert it correctly to your local timezone.

ssquare

4 years ago

Level 2

@drehimself actually, this is the issue. For example, I have a release date field, for example if I save the release date as 2022-04-24, then on PST it is showing release date as 2022-04-23. This is not what i want, instead I want to show the 2022-04-24 as release date to all timezone, but in case of edit, I want to format field from 2022-04-22 to Apr 24,2022, that is the reason why I am using new Date(item.release_date). Or may be I am doing wrong something else as well.

But, what I want to have is to show the same release date across all timezone. Currently, from api, I am sending it as release_date: "2022-04-24"

Here is the screenshot: https://ibb.co/VgvTnLW

ssquare

4 years ago

Level 2

@drehimself Here is the saqndbox https://codesandbox.io/s/date-example-wfvcmu (for example use pst timezone, it will show you Apr 23,2024)

Please or to participate in this conversation.