DateTimePicker's hidden value does not respect DatesProvider timezone

dylantf commented 1 month ago

Dependencies check up

[X] I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.12.2

What package has an issue?

@mantine/dates

What framework do you use?

Remix

In which browsers you can reproduce the issue?

Chrome

Describe the bug

When setting a timezone through DatesProvider, it appears that the internal conversion is done correctly on the underlying Date object for the input's value. However, when inspecting the hidden input, there is a further conversion being done based on the browser's timezone, which results in the value being incorrect when submitting a plain HTML form.

Example:

My browser's timezone is UTC +2
I set the timezone to UTC in DatesProvider
In a DateTimePicker, I select the a date with the time 21:00
- The value is correctly displayed by default in the visible input as 21:00
- The underlying Date object is correctly stored (with a serialized value of 2024-09-17T21:00:00.634Z)
The hidden input's value is incorrectly set to 2024-09-17T19:00:00.634Z (2 hours off)

If possible, include a link to a codesandbox with a minimal reproduction

No response

Possible fix

No response

Self-service

[ ] I would be willing to implement a fix for this issue

Kenzo-Wada commented 1 month ago

Can you provide a reproduction sandbox?

dylantf commented 1 month ago

Sure, here's a sandbox: https://codesandbox.io/p/sandbox/mantine-react-template-forked-pm3mxg

You may need to adjust the timezone based on where you are to see the problem.

My browser is using CEST (+2 UTC)
The timezone in the sandbox is set to America/Los_Angeles (-7 UTC)
I pick a datetime of 2024-09-18 00:00
The form value is correctly set to that date with 07:00 (because Date objects are stored in UTC, 7 hours ahead of LA)
The hidden input's value is incorrectly set to 2023-09-17 22:00 UTC, 9 hours off from the time they picked