Material-ui-pickers: Timezone issue when selecting date

[KPpuria]

When you use the Keyboard date picker with the formik integration the date is outputted correctly if I use the Calendar to pick a date. If i type in the date with keyboard certain hours are subtracted and the output is wrong. Subsequently the calendar picker also provides the wrong input.

Current Behavior 😯

I pick the date 25/02/2020 -> output is 2020 February 24th 18:30

Expected Behavior 🤔

When i pick the date 25/02/2020-> output date should also be 2020 February 25th

Steps to Reproduce 🕹

Attached an example from the docs page itself

[oliviertassinari]

Please provide a minimal reproduction test case with v4.0.0-alpha.10. This would help a lot 👷 .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

[KPpuria]

Please provide a minimal reproduction test case with v4.0.0-alpha.10. This would help a lot construction_worker .
A live example would be perfect. This codesandbox.io template _may_ be a good starting point. Thank you!

Here is a live demo example. I could not move to 4.0.0-alpha.10. as some formik error kept popping up.
https://codesandbox.io/s/lucid-morse-noo18?file=/src/App.js

I am also trying to use this for a project that will be deployed soon so using alpha build would not be preffered.

[dmtrKovalenko]

@KPpuria which timezone setting do you have?

[KPpuria]

@KPpuria which timezone setting do you have?

@dmtrKovalenko I am in IST, i have not made any particular code changed to specify this timezone. Is there a way to do that? if yes, can you please tell me how to do it.

[dakshsaraf]

I am facing the same problem, as indicated by @KPpuria the demo page on the docs website is also causing this error.

[oliviertassinari]

I have updated the reproduction to use the latest version of the library, v4.0.0-alpha.10: https://codesandbox.io/s/old-waterfall-m6mxw?file=/src/index.js. The described behavior of the component looks correct. However, it seems to be a new manifestation of #1526. The format displayed is equivalent to new Date().toISOString(), it the datetime in UTC.

[oliviertassinari]

In theory, we could close for #1526 as a duplicate, however, I think that this one brings a different perspective on the issue. The more sides of the problem we can explore, the better we can improve the documentation

[michaeltnguyen]

@oliviertassinari the fundamental issue is that this library uses a DateTime (a single moment in time), to represent an entire day (yyyy-MM-dd). This leads to all of these time and time zone issues. You cannot correctly represent an entire day using a DateTime.

In my opinion, the way to fix this is not via documentation, but with an improved API. You need to be able to model just the year, month, and date, with no time or time zone components at all. Take a look at https://js-joda.github.io/js-joda/manual/LocalDate.html

A DatePicker should not know about, or care about time or time zones.

[oliviertassinari]

@michaeltnguyen Yeah, maybe we should only manipulate a string as a value, as a native data picker does. I like how simple this approach is.

[joaomantovani]

I've faced some related issue, maybe it help someone:
https://stackoverflow.com/questions/60382084/material-ui-datepicker-showing-wrong-date/64805720#64805720