mantinedev
Dates in DateInput don't respect DateProvider timezone
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.13.2
What package has an issue?
@mantine/core
What framework do you use?
Vite
In which browsers you can reproduce the issue?
Safari
Describe the bug
When a DateInput is wrapped in a DateProvider with a timezone, I would expect the dates in the picker to be in the timezone supplied in the provider. However, it seems that they're just using the local timezone.
This is a problem when setting a minDate in the DateInput.
For example, it's now
- Oct 15 2:30pm in San Francisco, USA
- Oct 16 7:30am in Brisbane, Australia
If I set my system time to Brisbane and the DateProvider timezone to 'America/Los_Angeles', and set minDate={new Date()}, I would expect to see Oct 15 is the earliest selectable option. However, Oct 16 is the earliest selectable option.
I've included a sandbox, but depending on whether San Francisco / Brisbane are on the same day when you try it, it might be less obvious that there's an issue.
To investigate further, I tried logging the date in the renderDay function, and it's showing in the browser timezone, not the DateProvider timezone. I would have expected the provider timezone, and maybe this points to the underlying issue that calendar date boundaries are not respecting the timezone provided.
If possible, include a link to a codesandbox with a minimal reproduction
https://codesandbox.io/p/sandbox/mantine-react-template-forked-tjl7nn
Possible fix
No response
Self-service
- [ ] I would be willing to implement a fix for this issue
In case it's helpful for investigation, I just discovered that the highlightToday prop does seem to respect the provider timezone.
This is my current workaround, by the way, but it doesn't seem like it's as good of a solution as if the picker dates respected the provider timezone.
// This is a workaround for an issue with Mantine, where dates in a calendar
// use the browser's timezone instead of the timezone set in the enclosing
// `DatesProvider`. This issue is tracked in mantinedev/mantine#6982.
//
// The solution is to work in the browser timezone, but pretend it's the
// home's local timezone.
//
// In order to show the correct minimum date in the calendar, we need to get
// the current date in the home's timezone, and then replace the timezone
// with the browser's timezone.
//
// TODO: Remove workaround once mantinedev/mantine#6982 is fixed.
let minDate = dayjs(new Date());
minDate = minDate.tz(homeTimezone);
const browserTimezone = dayjs.tz.guess();
minDate = minDate.tz(browserTimezone, true);
Help wanted with validation and PR with a fix. I do not use timezones feature and don't have much time to work on this issue.
@Sergio16T were you planning on working on a fix? Happy to discuss if helpful.
@mawallace Hey Michael. Thank you for checking in. I'm all good for now. I will reach out if I have any questions. Plan to start work on this in the coming weeks as I have bandwidth.