DateField will show previous day when timezone is negative

[sebitoelcheater]

What you were expecting:
When displayed in a browser with negative timezone, for example America/Santiago (-04:00), DateField should show "2020/08/02" if the value of the date field is "2020-08-02".

What happened instead:
It shows "2020/08/01" instead.

Steps to reproduce:
Set a negative timezone to the browser like America/Santiago (-04:00). Set "2020-08-02" to a date field through DateInput. Then see the date column in the list and it will show "2020-08-01".

Environment

• React-admin version: 3.7.1
• Last version that did not exhibit the issue (if applicable): -
• React version: 16.13.1
• Browser: Chrome
• Stack trace (in case of a JS error): -

[djhi]

Not sure we can do anything about it. We are just using the Date object toLocaleDateString function. Have you tried specifying the locales and options as per the documentation?

[SaqibAltaf-abbc]

Can any one guide me how to run this project?
I followed all the script written in package.json but its not working

[acrtz]

I looked in to this problem because it is causing the e-2-e tests to fail on master when run in a negative timezone (GMT-700).
I also tried to create a new post in the simple example. Which resulted in the same problem as descibed by @sebitoelcheater

If I create a post with a publish_at date of '2020-09-01', the date is sent to and return from the api as '2020-09-01', the problem occurs when the string is transformed into a date as follows

new Date('2020-09-01')

The result is 'Mon Aug 31 2020 17:00:00 GMT-0700 (Pacific Daylight Time)', which shows up in the DateInput/DateField as '2020-09-31'.

The issue is that toLocalDateString doesn't actually affect the timezone, it only affects the formatting of the date string.

Proposed solution

I spent some time thinking about how this might be solved, but all of my ideas would involve breaking changes so would have to be saved for a major version bump.

A workaround solution that I found is that when the date is returned from the api the timezone can be appended to the date string. The user can get the timezone from their system as shown below or they could pick some other way to set it.

 // get the timezone of the users computer 
 const timezone = String(new Date()).split(' ')[5]; // gives a timezone like 'GMT-700'     
 
 // create new date using timezone
 const date = new Date(`2020-09-01 ${timeszone}`);

This is something that people could easily add themselves. @djhi if you think this is a good idea I would be willing to add it into the documentation.

(not sure if this should be raised in a different issue or here)
Also the following two tests for e-2-e tests for integration/edit.js need to get fixed.
'should intialize the form correctly when cloning from edit'
'should keep DateInput value after opening datapicker'

The tests can be fixed by adding a time zone to the data.js file

published_at: "2012-08-05"

would become

published_at: "2012-08-05 UTC"

and in the tests

const date = new Date('2012-08-05').toISOString().slice(0, 10)

would become

const date = new Date('2012-08-05 UTC').toISOString().slice(0, 10)

I would be willing to make a pull request to fix the tests as well if you think it is a reasonable solution.

[fedeant]

I'm in -3 timezone and as @djhi commented, I solved it setting the timeZone option to UTC:
<DateField source="date" locales="es-UY" options={{ timeZone: 'UTC' }} />

[WiXSL]

Fixed by #7242

[anthonycollinnadeau]

I have the same issue in date Input on edit, what are your solutions?