search

dmtrKovalenko / date-io

Abstraction over common javascript date management libraries
MIT License
726 stars 90 forks source link

dayjs gives `invalid date` when formatting with localized format from @mui/material/Datepicker #588

Closed momrak closed 2 years ago

momrak commented 3 years ago

Hi,

I try to swap out react-datepicker with material UIs date picker (https://mui.com/components/date-picker/), but I have gotten stuck on some sort of formatting issue.

I think (as usual) the problem lies with something I did, so if someone is able to spot that righ away that would be great, otherwise I'll try to setup a minimal reproduction repo.

As can be seen in image 1 below I use Material UIs LocalozationProvider, giving it the nb-localization object, I also set input-format to be DD.MM.YYYY (I have also tried without setting this with no luck...).

Eventhough everything seems to be correct I receive invalid date.

If I change this to using the standard UK format DD/MM/YYYY it works, so there seems to be some issue with the localization. Almost as if the localizedFormat-plugin is not included or something.

Does anyone have a clue what this might be?

Not completely sure whether this issue belongs here, in the dayjs-repo, or in the @mui-repo, so please let me know if it should be asked somewhere else :)

comp date2 date3

dmtrKovalenko commented 3 years ago

Can you provide CodeSandbox with reproduction please?

momrak commented 3 years ago

I created a minimal reproduction repo now, and it works there, so there is something weird in my original repo it seems. Versions are all the same, and the only difference I can see is with using react-hook-form in addition in the orignal repo. I will do some more digging and get back to you if I manage to reproduce it

momrak commented 3 years ago

It works when I click and use the calendar UI, but not when I use the keyboard to enter a date. I.e. go from 21.09.2021 remove last char to 21.09.202 and then add it back again to 21.09.2021 it will still be invalid date. But if I click the date from the picker it works. If you have any clue what this could be I would be grateful

dmtrKovalenko commented 3 years ago

Please provide a reproduction with datepicker in code sandbox and I can debug it

eliocro commented 2 years ago

Hi, I have experienced the exact same issue: When selecting a date from the picker it works fine, but not when entering the date manually. The returned date is invalid.

Here's a code sandbox with a demo of the problem: https://codesandbox.io/s/inspiring-jasper-h9pjm?file=/src/App.js

chwallen commented 2 years ago

As can be seen in image 1 below I use Material UIs LocalozationProvider, giving it the nb-localization object, I also set input-format to be DD.MM.YYYY (I have also tried without setting this with no luck...).

Hi, I have experienced the exact same issue: When selecting a date from the picker it works fine, but not when entering the date manually. The returned date is invalid.

I noticed when using the DatePicker component that it is no good passing the object itself as locale. If you change your imports to just import "dayjs/locale/nb"; and pass in the string "nb" as locale instead, it will work as expected. Tested this in your code sandbox @eliocro as well.

dmtrKovalenko commented 2 years ago

Released in 2.13.2