DatePicker component seems to behave incorrectly when using localization

What package has an issue

@mantine/dates

Describe the bug

I’m having a little bit of trouble with the DatePicker component when using localization: if you select a date for a split second the first character of the month is uppercase and then it switches back to lowercase (it is very fast). Furthermore it doesn’t seem to use any format of the locale I selected (https://github.com/iamkun/dayjs/blob/dev/src/locale/it.js) but it is translating month names correctly.

In which browser did the problem occur

Firefox 102.0.1

If possible, please include a link to a codesandbox with the reproduced problem

https://codesandbox.io/s/goofy-browser-ducwiy?file=/src/App.tsx

Do you know how to fix the issue

No response

Are you willing to participate in fixing this issue and create a pull request with the fix

No response

Possible fix

I worked around both problems this way https://codesandbox.io/s/ancient-glade-0ezu2h?file=/src/App.tsx I dynamically load dayjs locales so I can read the formats and I apply them using dateFormat on the MantineProvider. I’m not even sure if dateFormat is a documented property as I got it from source code and couldn’t find it on the documentation.

[ercgrat]

Hi @esistgut, I opened a PR that fixes the capitalization glitch you noticed.

Otherwise, there is also an inputFormat prop on the DatePicker component that you can use. It also happens not to be documented. The locale-specific formats will only be recognized if you extend dayjs with the localizedFormat plugin. I made a CodePen that shows this: https://codesandbox.io/s/eager-shirley-7srfg2?file=/src/App.tsx

Here’s the dayjs doc page on the topic: https://day.js.org/docs/en/plugin/localized-format

@rtivital would you mind if I open a PR adding documentation for the inputFormat prop with this context?

[rtivital]

Fixed in 5.0.2