CODEWITHSUNDEEP
javascriptreactjsdatedatetime
ArthurJ
ArthurJ

Reputation: 849

Incorrect date input being stored within state

I am getting confused with javascript dates but within my app, I am using the following npm package: rc-datepicker

Here the user clicks on a date, which is 21/11/2021 but for some reason, within state, it is being stored as:

2021-11-20T23:25:43.223Z

which is the day prior.

I have got a console log of the date that is being passed through, which is in the following format:

Sun Nov 21 2021 10:25:46 GMT+1100 (Australian Eastern Daylight Time)

Can someone pls assist on how to ensure that the 21/11/2021 is returned and ignore the timezone, if that is the issue or something else?

Upvotes: 0

Views: 122

Answers (1)

Steve
Steve

Reputation: 4995

Because you are on AEDT (me too!) your dates will show in your timezone.

As pilchard mentioned in the comment, 2021-11-20T23:25:43.223Z is GMT so that's like the start point. Us being +11 means those two representations of time above are actually at the same point in time.

Let's look at what happens with those dates you have.

If you call:

const d = new Date("2021-11-20T23:25:43.223Z")
console.log(d.toString()) // Prints the local representation: Sun Nov 21 2021 10:25:43 GMT+1100 (Australian Eastern Daylight Time)

console.log(d.toISOString()) // Prints in ISO formatted string

Have a look at other date object methods.

So store that string (eg. "2021-11-20T23:25:43.223Z") which represents the same point in time anywhere in the world. Then convert it to the user's local timezone

const d = new Date("2021-11-20T23:25:43.223Z")

You can use other methods such as toLocaleDateString in the link above to specify a particular timezone. The timezone component can be one from the tz database. There is a list of them on wikipedia.

Upvotes: 1

Related Questions