@material-ui/pickers 4.0.0-alpha.6

v4.0.0-alpha.6

on Node.js NPM

🧙 renderInput API

Our new API to render the text field input, that solves a lot of problems! Like spreading props down to text field, override them, override classes for the picker – and saves a lot of bundlesize for people who use custom text fields.

⛔ Breaking changes

• renderInput prop is required for any picker. For the compatibility (no user-facing changes) it will be

<DatePicker
+  renderInput={props => <TextField {...props} />}
/>

For DateRangePicker it includes 2 arguments (startProps and endProps respectively)

<DateRangePicker
  renderInput={(startProps, endProps) => (
    <>
      <TextField {...startProps} />
      <DateRangeDelimiter> to </DateRangeDelimiter>
      <TextField {...endProps} />
    </>
  )}
/>

• Change the signature of onError callback to return a reason why the error must be displayed. We are not displaying English error messages by default anymore.
  If the input is invalid picker will only show red-colored TextField. So from now form validation with sharing internal pickers logic will look like this (reason is well-typed string union). More info in this guide

Removed props

1. minDateMessage
2. maxDateMessage
3. invalidDateMessage
4. strictCompareDates
5. emptyText – it has been adding more confusing than what it's worth
6. maskChar – because it is not visible for your users anymore and needs only to generate and parse mask pattern.

Prop renames

• keyboardIcon => openPickerIcon
• KeyboardButtonProps => OpenPickerButtonProps

✨ Features

• Significantly improved form integration experience with the new onError prop. Checkout new form integration guideline
• Export special DateRangeDelimiter component that can be used for renderInput of DateRangePicker
• Better recognition of touch devices, using media (pointer: fine) (#1653)
• Introduce new shouldDisableYear prop in order to dynamically disable years (#1743)
• Improve input mask UX and a11y (#1661)

We have changed the logic of the input mask to be more accessible and less noisy:

1. It is not rendering the whole mask from now (12/1_/____) for partial input it will show only typed part and the next delimiter (12/12/). And still does not allow to enter invalid symbols and type outside of date format.
2. Generate user-readable placeholder and helper text thanks to dmtrKovalenko/date-io#340. This should significantly increase UX for keyboard input

👩‍⚕️ Fixes & Enhancements

• Fix importing error for reexported adapters (#1634)
• Make disabled years properly highlighted (#1743)
• Do not open year by clicking space right of the arrow icon button (#1702)
• Fix unexpected month switching on tabbing from the 1st day of the month (#1702)
• Make impossible to focus disabled day/year via keyboard (#1702)
• Reexport DateRangePickerProps [#1666] (#1668)
• Align DateRangePicker inputs by baseline (#1689) @Philipp91
• Rerender picker input when inputFormat changed @vdyachenko
• [core] Align internal icons with mono-repository (#1692) @oliviertassinari
• [docs] Fix DateFnsAdapter import docs typo (#1699) @Domino987
• [docs] Fix Shortcat -> Shortcut typo(#1663) @Philipp91