[pickers] Let mask support variable number of digits

[Filipeue]

checkMaskIsValidForCurrentFormat is not respecting formats with variable number of digits https://github.com/mui-org/material-ui/blob/e0cdcd130db60d252c4382570844ea7278649a08/packages/mui-lab/src/internal/pickers/text-field-helper.ts#L79

• [x] The issue is present in the latest release.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

mask "__/__/____" is marked as invalid if it doesn't match "_/_/____" and "__/__/____"

Expected Behavior 🤔

mask "__/__/____" is marked as invalid if it doesn't match "_/_/____" or "__/__/____"

Steps to Reproduce 🕹

Follow the link and open console https://codesandbox.io/s/loving-monad-zut3e?file=/src/Demo.tsx

Context 🔦

I am using default DatePicker with LocalizationProvider (date-fns adapter). It uses format(new Date(), "P") under the hood to get utils.formats.keyboardDate. So the dates rendering should be localized and masks automatically generated. But I am getting warning "The mask "__/__/____" you passed is not valid for the format used P. Falling down to uncontrolled not-masked input." Even if I use my own mask respecting the localized format warning persists. So we have 2 issues:

1. Masks are not generated according to locale settings (https://github.com/mui-org/material-ui/issues/28871)
2. Masks with variable digits raise warning and disable masked input

Your Environment 🌎

`npx @mui/envinfo`

``` System: OS: Windows 10 10.0.19043 CPU: (4) x64 Intel(R) Core(TM) i5-6300HQ CPU @ 2.30GHz Memory: 1.30 GB / 19.89 GB Binaries: Node: 14.17.3 - C:\Program Files\nodejs\node.EXE npm: 6.14.13 - C:\Program Files\nodejs\npm.CMD Managers: pip3: 21.1.3 - D:\Program Files\Programs\Python\Python39\Scripts\pip3.EXE Utilities: Git: 2.32.0. Virtualization: Docker: 20.10.8 - C:\Program Files\Docker\Docker\resources\bin\docker.EXE SDKs: Windows SDK: AllowDevelopmentWithoutDevLicense: Enabled Versions: 10.0.19041.0 IDEs: VSCode: 1.60.0 - C:\Program Files\Microsoft VS Code\bin\code.CMD Languages: Bash: 5.0.17 - C:\Windows\system32\bash.EXE Python: 3.9.6 Browsers: Edge: Spartan (44.19041.1023.0), Chromium (94.0.992.38) Internet Explorer: 11.0.19041.1202 ```

[Tevvek]

I believe something similar to be happening when displaying dates that are text i.e. "12 October, 2021". On migrating to version 5, I transformed:

import { DatePicker as MuiDatePicker } from "@material-ui/pickers";

<MuiDatePicker
    format="D MMMM, YYYY"
    value={value || null}
    onChange={handleChange}
    autoOk
    {...other}
/>;

into:

import { DatePicker as MuiDatePicker } from "@mui/lab";

<MuiDatePicker
  inputFormat="D MMMM, YYYY"
  value={value || null}
  onChange={handleChange}
  disableCloseOnSelect={true}
  renderInput={(params) => <TextField {...params} />}
  {...other}
/>;

but started getting: The mask "__/__/____" you passed is not valid for the format used DD MMMM, YYYY. Falling down to uncontrolled not-masked input.

Even with the mask: __ ___, ____ for a fixed but text format i.e. "12 Oct, 2021" it generates the warning.

I ended up disabling it disableMaskedInput={true} for the moment.

[msalahz]

I'm getting the same warning and @Tevvek 's workaround / suggestion by setting disableMaskedInput={true} worked for me.

[Filipeue]

I'm getting the same warning and @Tevvek 's workaround by setting disableMaskedInput={true} worked for me.

@msalahz disabling discussed feature shouldn't be considered workaround 🤔

[msalahz]

Agreed @Filipeue!

[Manibhatt]

Any Solution for this issue, as this warning, occurs on dynamic locale date format especially in case of en-us: 'M/dd/yyyy' where the part of the format is a single digit.

[krip4ik]

Same issue, this is the bug in native code. Regex should be different from /[\d]/gi

[alexfauquette]

This issue is related to #4487

It is not a bug, be an enhancement. Mask does not support variable number of digits to avoid edge cases such as the user enters "01/03/1" and then it switches to "1/3/1" because the date engine recognized Date(0001, 3, 1) which will be formatted

The portion of code which has been pointed is here to inactivate mask if your format has variables digit number

[flaviendelangle]

I am closing this issue.

We recently launched the first beta of @mui/x-date-pickers and @mui/x-date-pickers-pro v6.x. This new version contains a full rework of the input editing. You can have a look at the v6 doc which is currently in beta and the related blog post.

We won't apply complicated (and not always doable) fixes to the v5 version, I hope this new version solves your problem.