Material-ui-pickers: Mas warning on console The mask "__/__/____ __:__ _M" you passed is not valid for the format used P p. Falling down to uncontrolled not-masked input.

[activebiz]

Environment

| Tech | Version |
| -------------------- | ------- |
| @material-ui/pickers | 4.0.0-alpha.7 |
| material-ui | 4.9.14 |
| TypeScript | |
| React | 16.12.0 |
| Browser | Chrome |
| Peer library | "date-fns": "2.13.0" | |

Steps to reproduce

Code sandbox example: https://codesandbox.io/s/hungry-bohr-ugb2e?file=/src/App.js
Use basic example from the website.

Expected behavior

Not expecting any warnings from the example

Actual behavior

Mask warning on console "The mask "__/__/____ __:__ _M" you passed is not valid for the format used P p. Falling down to uncontrolled not-masked input. "

Live example

Code sandbox example: https://codesandbox.io/s/hungry-bohr-ugb2e?file=/src/App.js

[Philipp91]

I think the relevant code is here. I'll send a fix.

[Philipp91]

@dmtrKovalenko There are 4 other occurrences of \|\|.* \? in the code base. It's trivial to fix them (just put parentheses around the ternary expression), but I'm confident to fix them, as they might actually break things instead of fixing them, assuming that the current code has been tested as is.

Filed #1803 for those.

[Philipp91]

This error message comes from this check that essentially ensures that the provided mask is one of two allowed masks, both of which can be derived from the format using only the utils. Yet the library hard-codes

https://github.com/mui-org/material-ui-pickers/blob/bffad8fce6bbd6e2e50badd3f66489f49e7d6a3a/lib/src/DateTimePicker/DateTimePicker.tsx#L78

masks for the en-US locale as default values. So if he user has a locale with a different date format, the library's default values are invalid by the library's own validation function.

Given that the validation function knows exactly what it wants (it's not like it tests a regex or does sanity checks, it literally has the exact expected value there), I propose to just make the more sensible of these two allowed values the default value. (If users want to switch to the other one, then they can still do so by overriding the prop.)

[oliviertassinari]

@dmtrKovalenko What do you think of the solution proposed by @Philipp91 in https://github.com/mui-org/material-ui-pickers/issues/1776#issuecomment-632905414?

[Miyagee]

I'm getting the warning the mask "__. ____ ____" you passed is not valid for the format used dd. MMMM yyyy. Falling down to uncontrolled not-masked input. I guess it is related to this issue?

[hattamsoyunov]

My date format DD.MM.YYYY and I added mask.

<DateRangePicker
    mask="__.__.____"
    ...
/>

[gReis89]

I'm trying to use DateRangePicker with a custom inputFormat, the format works pretty good, but the mask is breaking, I got the same warning message from this topic:

The mask "__/__/____" you passed is not valid for the format used YYYY-MMM-DD. Falling down to uncontrolled not-masked input. 

Live example

I tried to add a mask="____-___-__" prop to follow my inputFormat but I got the same error.

[oliviertassinari]

@Philipp91 After further internal discussion, it came up that the reason this warning has to exist is because of the variable length of some of the parts of the date. Basically, in the US, 7:00 is as much valid as 17:00. In order to account for this variable length, we would need a logic close to https://codesandbox.io/s/ecstatic-germain-jw5fr?file=/index.js, which might add too much complexity than the problem is worth.

In this context, a possible option is to give up on the localized format, for instance, https://github.com/dmtrKovalenko/date-io/blob/7bf469805c1fd73d072164c71d3a3267fcc42ce7/packages/date-fns/src/date-fns-utils.ts#L45 https://date-fns.org/v2.14.0/docs/format, and hard code the format to a full length version, meaning 07:00 instead of 7:00.

[Miyagee]

Any updates on this one @oliviertassinari?

[Miyagee]

Still getting the warning even after 4.0.0-alpha.9 The mask "__. ____ ____" you passed is not valid for the format used dd. MMMM yyyy. Falling down to uncontrolled not-masked input.

[dmtrKovalenko]

It was not released. Will be released today as alpha.10

[BowlingX]

The mask is not working for __/__/____ __:__ _M in alpha.10 (and the DateTimePicker) for me now with the en-us locale. Masks basically just work when I disable ampm. German works fine, for example. (see https://codesandbox.io/s/peaceful-bash-2jmu3?file=/src/App.jsx)

[oliviertassinari]

@BowlingX what you are describing sounds expected. It's the tradeoff highlighted in https://github.com/mui-org/material-ui-pickers/issues/1776#issuecomment-650404355. If you wish to explore the path of a smart mask, feel free to :). I wouldn't expect it to require too many lines of codes.