mantine: Not able to set default time zone for DatePicker and TimeInput

What package has an issue

@mantine/dates

Describe the bug

All the dates displayed by the DatePicker and TimeInput are in the local timezone. There is no way to display it using a custom timezone, like UTC for example.

What version of @mantine/hooks page do you have in package.json?

5.10.2

Some comments

Date object always store absolute dates inside, this is when we use the function toString or the functions to get any of the component that it does the shift based on the local timezone. TimeInput just uses those functions to display the dates, so it is not possible to display a date as UTC for example without creating fake dates.

Right now the only solution I have is to do this:

<TimeInput
    value={subtractUtcOffset(date)}
    onChange={(value: Date) => onTimeChange(addUtcOffset(value))}
/>

function subtractUtcOffset(date: Date) {
    if (!date) {
        return date;
    }

    let result = dayjs(date);

    const utcOffsetInMinutes = dayjs().utcOffset();
    result = result.subtract(utcOffsetInMinutes, 'minutes');

    return result.toDate();
}

function addUtcOffset(date: Date) {
    if (!date) {
        return date;
    }

    let result = dayjs(date);

    const utcOffsetInMinutes = dayjs().utcOffset();
    result = result.add(utcOffsetInMinutes, 'minutes');

    return result.toDate();
}

Note that the dates created with the shift functions are date that are not representing the real time we manipulate. This is why having a way to select the timezone in the DatePicker and TimeInput components would be better.

Also, this code is bugged, it uses the current UTC offset, but the offset changes depending on the daylight saving in some countries. So if we are in winter and I want to select an UTC date in summer, this solution will give me an incorrect date.