Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix DateInput messes up dates in some timezones #10299

Merged
merged 12 commits into from
Oct 28, 2024

Conversation

djhi
Copy link
Collaborator

@djhi djhi commented Oct 24, 2024

Problem

Fixes #10197

Solution

We were trying to convert the input value into a Date. However, when passing a partial date (such as the html input value yyyy-MM-dd) to Date, it assumes the UTC timezone. When stringified again, this UTC date might be different than the one entered by users because of their timezone.

How To Test

  • Pass the original user value to react-hook-form.
  • Don't try to convert dates strings to dates in parse

Additional Checks

  • The PR targets master for a bugfix, or next for a feature
  • The PR includes unit tests (if not possible, describe why)
  • The PR includes one or several stories (if not possible, describe why)
  • The documentation is up to date

Copy link
Contributor

@slax57 slax57 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Other than that it seems to work well! I emulated my position and locale to Honolulu, and saw no issues at all.
Also tested in Chrome and Firefox successfully. GJ!

packages/ra-ui-materialui/src/input/DateInput.stories.tsx Outdated Show resolved Hide resolved
@@ -202,38 +205,65 @@ export type DateInputProps = CommonInputProps &
Omit<TextFieldProps, 'helperText' | 'label'>;

/**
* Convert Date object to String
* Convert Date object to String, ignoring the timezone.
*
* @param {Date} value value to convert
* @returns {String} A standardized date (yyyy-MM-dd), to be passed to an <input type="date" />
*/
const convertDateToString = (value: Date) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We still need this change for cases where the initial value is a non-standard date string (e.g. 02/02/2001)

@fzaninotto fzaninotto merged commit 7b52591 into master Oct 28, 2024
15 checks passed
@fzaninotto fzaninotto deleted the fix-date-input-timezone branch October 28, 2024 07:41
@fzaninotto fzaninotto added this to the 5.3.2 milestone Oct 28, 2024
fzaninotto added a commit that referenced this pull request Oct 28, 2024
## Problem

The changes introduced in #10299 leads to a regression when the field value is an ISO string or date.

The idea of that change was that if the value contains a date, react-admin should always display that date.

This is often not what users want, because a date entered in a US browser than stored in GMT then displayed again will have shifted.

Besides, this is not required to fix #10197. The fix in #10299 is the removal of the call to `parse` in `onChange` (in fact, `parse` used to be called twice).

## Solution

Do not strip the timezone data, whether the field value is a string or a date.
quentin-decre pushed a commit to quentin-decre/react-admin that referenced this pull request Nov 13, 2024
## Problem

The changes introduced in marmelab#10299 leads to a regression when the field value is an ISO string or date.

The idea of that change was that if the value contains a date, react-admin should always display that date.

This is often not what users want, because a date entered in a US browser than stored in GMT then displayed again will have shifted.

Besides, this is not required to fix marmelab#10197. The fix in marmelab#10299 is the removal of the call to `parse` in `onChange` (in fact, `parse` used to be called twice).

## Solution

Do not strip the timezone data, whether the field value is a string or a date.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review
Projects
None yet
Development

Successfully merging this pull request may close these issues.

DateInput decrease the day by 1 when you change its value and trigger a form validation function
3 participants