DateField/DateInput off by one w/ optimistic rendering

[tommymcarver]

What you were expecting:
When PUT/POST (update/create) with DateInput, optimistic rendering renders the date as the same date inputted

What happened instead:
Optimistic Rendering rendered the date off by one (EX: 4/5/2020 -> 4/4/2020) which results in the check to crash and error to pop up

Steps to reproduce:
Use a DateInput and save from an edit/create form a date and look at how optimistic rendering renders the date.

Related code:

export const BlankEdit = props => (
    <Edit {...props}}>
        <SimpleForm warnWhenUnsavedChanges redirect="show">        
		<DateInput source="date" locales="en-US"/>
	</SimpleForm>
    </Edit>
);

Other information:

Environment

• React-admin version: 3.10.1
• Last version that did not exhibit the issue (if applicable): N/A
• React version: 16.13.1
• Browser: Firefox
• Stack trace (in case of a JS error): N/A

[fzaninotto]

I'm sorry, but I don't understand your bug. When I use the DateInput, I see nothing wrong with it.

Can you please add a link to a CodeSandbox, and explain precisely the scenario to reproduce the bug?

[tommymcarver]

I will mock up a code sandbox but in the mean time let me explain a little bit more.

When updating a date field that exists in my API using the DateInput component, optimistic rendering is rendering the date as one day less than the actual date the user inputs. So, when the optimistic rendering cleanup occurs, the data provider throws an error, as the API and render differ by one in the date field.

If you need more explanation, please let me know. I will work on mocking up a sandbox!

[tommymcarver]

@fzaninotto here is a sandbox link: https://codesandbox.io/s/autumn-pine-2o2lf

Try going to the comments, changing the date of one of the comments, saving, and then look at what the date now says versus what the date you inputted says. This behavior is the unintended behavior that I am trying to explain.

This sandbox is not altered at all from the base react admin sandbox.

[WiXSL]

@tommymcarver, check this issue #5116 and the solution at the #end

[WiXSL]

@fzaninotto,

This is reproducible in DateField components if the time zone is negative and the month has two digits. (Picture from PostList of simple project)

You can see how the tolocalDateString() usage vary in the two time zones (First run is Uruguay, Second is Paris):

Which is what the DateField uses internally

---

Possible solutions:

1. This is fixable in user land by passing the timezone in the options (It could be documented):

<DateField source='...' options={{ timeZone: 'UTC' }} />

2. Setting a default options with timeZone = 'UTC' to the DateField.

[jamesrwoodruff]

Is this fixed in later React-Admin versions? I'm using v2.9.4 and ran into this. Adding the timeZone 'UTC' to the options does seem to resolve it for me. If not fixed, it may be worth considering mentioning in the docs.