CODEWITHSUNDEEP
reactjsmaterial-ui
Benjamin M
Benjamin M

Reputation: 24527

How to customize keyboard input and format?

I've upgraded from material-ui-pickers 2.x to @material-ui/pickers 3.x (both with @date-io/moment). And now I'm struggling with the keyboard input and format.

With version 2.x I used format="D.M.YYYY". The user was able to type for example 1.1.2000 or 04.08.2000 or 12.12.2000.

But with version 3.x the input only strictly allows 1.1.2000. It's not possible to have 2-digit day or month. Though I changed to format="DD.MM.YYYY", but now it's impossible to input 1-digit day or month without a leading zero. E.g. typing 1.1.2000 results in 11.20.00.

How can I achieve one (or both) of the following behaviors?

  1. User can input whatever he wants, including characters (same behavior as with version 2.x). Or:

  2. Listen for . input and then jump to the next input section. I.e. User types 1.2.2000 and it will set 1 for day, then jump to the month section, because user pressed . key, then set 2 for month, then jump to year section, because user pressed . and then set 2000 for year.

Upvotes: 1

Views: 1997

Answers (1)

Benjamin M
Benjamin M

Reputation: 24527

I found a kinda hacky solution for case 1 using refuse and rifmFormatter:

<KeyboardDatePicker
    refuse={/[^\d\.]+/gi}
    rifmFormatter={value => value.replace(/[^\d\.]+/gi, '')}
    format={"D.M.YYYY"}
    ...
/>

This will only allow digits and dot as input in any order, and removes input masking.

Not the optimal solution, but way better than before.

Upvotes: 3

Related Questions