Resolving DatePicker display conflict with ISO 8601 input value

[proven zephyr]

Wondering if anyone knows how to get the datepicker to play nice with ISO 8601 formatted values? My data layer is passing around dates formatted like 2022-09-06 on par with ISO 8601, and while a normal date input can handle this just fine, the mantine datepicker has issue. Particularly, it seems to store the value properly, but not display it in the input.

example: https://codesandbox.io/s/mantine-quirks-forked-wfnmjn?file=/src/App.tsx

[nimble wyvern]

https://mantine.dev/dates/date-picker/#format-labels

https://codesandbox.io/s/dateformat-for-mantine-forked-97iqd3?file=/src/App.tsx

[proven zephyr]

@nimble wyvern yeah, i've tried that as well, but it seems like it's doing new Date() under the hood and transforming it to local time and giving me -1 days

[chilly crater]

Are you sure it's not an issue with timezones in codesandbox?

[nimble wyvern]

i think this is a dayjs under the hood thing

[proven zephyr]

Not sure exactly what the cause it but the same thing is happening on my box that’s happening in codesanbox

[nimble wyvern]

yeah im fairly certain there's consistent offset

[proven zephyr]

Right but how can I tell it to change the behavior?

[nimble wyvern]

actually yeah, this looks like a timezone difference thing

[proven zephyr]

But if it’s just sending it back as a date I just want it to be midnight of that date regardless to time zone

[nimble wyvern]

i understand, im investigating

[proven zephyr]

Preciate ya

[nimble wyvern]

@proven zephyr how does this behave? is there still an issue with the offset?
https://codesandbox.io/s/dateformat-for-mantine-forked-97iqd3?file=/src/App.tsx

also note: you can override toLocaleDateString() behaviour. so if my set to midnight solution does not work, you can coerce the timezone
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString#try_it

[proven zephyr]

Nice! In the car on my phone but I’ll be back at my computer in about 10 minutes to confirm, but it seems like that does it, thanks for the help 🍻

[proven zephyr]

hmm, actually it seems like it's resetting the time, but to the day prior

[proven zephyr]

actually, my setup is more like this and what you have does fix the -1 day problem, but the text doesn't show until you blur the input: https://codesandbox.io/s/dateformat-for-mantine-forked-0zxjcu?file=/src/App.tsx

[proven zephyr]

just realized the codesanbox doesn't even fix the display on blur, but the date does still seem to show as selected on the dropdown. very weird

[nimble wyvern]

in your example you changed it to remove the setting to 0 0 0 on init, maybe that is the issue

otherwise, try to force the locale formatting

[proven zephyr]

Yeah, took it off because it was still dropping it back a day. With that said, I think having some kind of transformation wrapper around incoming values would solve the issue, it needs to figure out what that looks like

[proven zephyr]

FYI, seems that dayjs figured this all out under the hood if you just use their toDate() method:

        value={
          value === null || value === undefined ? null : dayjs(value).toDate()
        }
        onChange={(date) => {
          if (date !== undefined && date !== null) {
            onChange(dayjs(date).toDate());
          } else onChange(null);
        }}

https://day.js.org/docs/en/display/as-javascript-date

[nimble wyvern]

great find, as a quick note you could simplify value to

{value ? dayjs(value).toDate() : null}

and onChange to

onChange(date ? dayjs(date).toDate() : null)