Material-ui-pickers: KeyboardDatePicker doesn't work with date-fns format string

[benmccann]

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"

[dmtrKovalenko]

Yes. But you can specify custom mask. I don’t think we can somehow recognize the format for end user

[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 :-)

[dmtrKovalenko]

Actually there is a note here

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

Is it not clear enough?

[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.

[nganhkhoa]

I just ran into this problem and finally understood how to use KeyboardDatePicker with proper format and mask.

format must be one of these strings, found in @date-io readme, regardless of the format by localization,

export interface DateIOFormats<TLibFormatToken = string> {
  /** Localized full date, useful for accessibility @example "January 1st, 2019" */
  fullDate: TLibFormatToken;
  /** Day format string extremely required to localize @example "Wed, Jan 1st" for US, "January 1st" for Europe */
  normalDate: TLibFormatToken;
  /** Shorter day format @example "Jan 1st" */
  shortDate: TLibFormatToken;
  /** Year format string @example "2019" */
  year: TLibFormatToken;
  /** Month format string @example "January" */
  month: TLibFormatToken;
  /** Short month format string @example "Jan" */
  monthShort: TLibFormatToken;
  /** Short month format string @example "January 2018" */
  monthAndYear: TLibFormatToken;
  /** Month with date format string @example "January 1st" */
  monthAndDate: TLibFormatToken;
  /** Day format string @example "12" */
  dayOfMonth: TLibFormatToken;
  /** Hours format string @example "11" */
  hours12h: TLibFormatToken;
  /** Hours format string @example "23" */
  hours24h: TLibFormatToken;
  /** Minutes format string @example "59" */
  minutes: TLibFormatToken;
  /** Seconds format string @example "59" */
  seconds: TLibFormatToken;
  /** Full time localized format string @example "11:44 PM" for US, "23:44" for Europe */
  fullTime: TLibFormatToken;
  /** Not localized full time format string @example "11:44 PM" */
  fullTime12h: TLibFormatToken;
  /** Not localized full time format string @example "23:59" */
  fullTime24h: TLibFormatToken;
  /** Date & time format string with localized time @example "2018, Jan 1st 11:44 PM" */
  fullDateTime: TLibFormatToken;
  /** Not localized date & Time format 12h @example "2018, Jan 1st 11:44 PM" */
  fullDateTime12h: TLibFormatToken;
  /** Not localized date & Time format 24h @example "2018, Jan 1st 23:44" */
  fullDateTime24h: TLibFormatToken;
  /** Localized keyboard input friendly date format @example "2019/01/01" */
  keyboardDate: TLibFormatToken;
  /** Localized keyboard input friendly date/time format @example "2019/01/01 23:44" */
  keyboardDateTime: TLibFormatToken;
  /** Not Localized keyboard input friendly date/time 12h format @example "2019/01/01 23:44" */
  keyboardDateTime12h: TLibFormatToken;
  /** Not localized keyboard input friendly date/time 24h format @example "2019/01/01 11:44 PM" */
  keyboardDateTime24h: TLibFormatToken;
}

mask will change how the slashes and colon appears, for example to turn from the default 2019/01/01 to 2019-01-01 one would provide mask="____-__-__" with maskChar="_" (which is also default).

And we provide the locale with the locale imported from the date-time library itself (date-fns, moment, lexon).:

import { eo } from 'date-fns/locale'
...
<MuiPickersUtilsProvider utils={keyboardDateTime24h} locale={eo}>
    <KeyboardDatePicker
       format="fullDateTime24h" // Not localized date & Time format 24h @example "2018, Jan 1st 23:44"
       mask="" // if you want to change how the text should appear
     />
</MuiPickersUtilsProvider>

Although having an option that passes any formatstring usable by the util is not bad, however, most of the time we don't need it. So we may close this issue after providing users with a proper documentation on format and mask property of KeyboardDatePicker. I don't think others should debug in their Chrome for half an hour straight to get the format array.

[dmtrKovalenko]

Fixed in v4. “P” is used by default from now