Overview
Here is the first prerelease of material-ui-pickers v4. We are going to ship all the features from the #1293. This alpha is actually the major design upgrade to new material design 2.0 pickers guidelines.
Documentation for v4: https://next.material-ui-pickers.dev/
Installation
Use npm @next tag to install the prerelease version. Make sure that we are going to introduce new breaking changes in prerelease versions.
yarn add @material-ui/pickers@next
Breaking changes
ampmprop is nowfalseby default.- date-io v2 required. So please update any of your
@date-io/{moment/date-fns/any}adapter to at leastv2.0.0 - There is no more
Keyboard*components exported (likeKeyboardDatePicker). From now any picker will allow keyboard input. For mobile, it is possible using the "pen" icon inside the dialog. - No more
variantprop. Variant now passed right to the mui text field. To force specific wrapper you can use different exported components. Check “Responsiveness” demo for each component.
So it is required that your formats will be keyboard friendly (e.g. MM/dd/yyyy instead of MMMM yyyy)
<DatePicker
- format="MMMM yyyy"
+ format="MM/dd/yyyy"
/> - There is no more
variantprop. By default, the picker will adapt to the user device viewport to render the most convenient wrapper (popover or dialog). But it is possible to force this behavior importing special components. Check out this example
Features
-
🎉 🎉 New design and UX 🎉 🎉
-
New animations, improve performance up to 30% for current calendar switching animations
-
Turn off animations (that are using react-transition-group) by default for Android devices. Use
reduceAnimationprop to configure this behavior. -
Better formats override ability for localization. But this feature will be significantly improved in the next prereleases
-
New way to input am/pm value
It is now the default behavior for desktop mode and DateTimePicker. Use ampmInClock to enable this view on mobile.