KeyboardDatePicker doesn't work with date-fns format string

If you don’t mind add a fun gif or meme, but no pressure

Environment

Tech	Version
@material-ui/pickers	^3.2.1
material-ui	^4.1.1
React	^16.8.3
Browser	Chrome 75
Peer library	date-fns ^2.0.0-beta.1

Steps to reproduce

1. Create KeyboardDatePicker with format="P"

Expected behavior

The docs for format just say “Format string”. It’s not clear to me what valid input for this format string is. I tried to use a date-fns format string, but that’s causing problems

My goal is to have a format string that respects the language setting of the user’s browser. E.g. I would like mm/dd/yyyy in English and dd/mm/yyyy in Spanish. date-fns has a format string P that accomplishes this. The browser’s Intl API would also do this, but there’s no way to use it in the format option since it only accepts a string

Actual behavior

I can only type one character in the input if format="P"

[benmccann]

I didn’t look at that page and was only looking at https://material-ui-pickers.dev/api/KeyboardDatePicker, which I’d expect to mention something

Make sure that mask will be automatically generated from passed format. It’s recommended to use only robust formats for keyboard input.

I’m not sure I would have understood this. Putting mask in backticks to indicate it’s a property might be helpful. But mainly I’m not sure from the description how I’d make sure whether mask is being automatically generated or what is meant by robust formats.

[benmccann]

That worked! Thanks!

Feel free to close this issue. I’ll leave it open for the time being in case you want to update the docs at all. It might be helpful to add a note in the format docs specifying that mask may need to be set when changing the format

Thank you for all your help! Our app is now working and ready to bring green power to many more homes 😃