Skip to content
Back to blog

Date and time pickers are moving to MUI X

Flavien Delangle

@flaviendelangle

After more than 18 months in the lab, the date and time picker components have found a new home as part of MUI X. This means we'll be dedicating even more time and effort to these complex components, to better meet the needs of both you and your users.

TL;DR

  • The date pickers are one step closer to a stable release.
  • No surprise licenses changes. We are staying true to our promises. What's MIT stays MIT, and we're going forward with our plan announced over a year ago to move the date range picker to the commercial license.
  • Follow the migration steps

What are date and time pickers?

Date and time pickers are interface controls that enable the user to select a date (or time) from a menu.

Date and time picker component

Date and time pickers using the default Material UI design

Common design patterns include text inputs, dropdown lists, calendars, timelines, and scrolling pickers on mobile devices.

The user may need to select an individual date/time, or a range.

What is MUI X?

MUI X is a collection of advanced components built for complex use cases.

As opposed to the MUI Core library, which leans on the open-source community for support, MUI X components require several full-time developers dedicated to engineering and ongoing maintenance.

MUI X components are available under two licenses:

  • MUI X is MIT licensed, so free to use.
  • MUI X Pro includes the most advanced features, and is commercially licensed.

Why have the date and time pickers been moved to MUI X?

Date and time picker UI elements appear simple enough on the surface, but they are surprisingly complicated to engineer.

When the picker components were ready to leave the lab, we had a choice to make: would they live in the MUI Core library, or should they become a part of MUI X?

Given the complex nature of these components, we decided that they would benefit most from the dedicated attention that they would receive from the X team.

And by offering an even more advanced component package through our commercial license, we can continue to grow our team to better serve your needs.

The date and time picker components are now available in two packages:

  • @mui/x-date-pickers has a MIT license, it contains all the open-source components
  • @mui/x-date-pickers-pro has a commercial license, it contains all the MIT and commercially licensed components

Which components are only available in the Pro package?

The date range components can only be used with a commercial license.

All other date and time picker components are available in mui/x-date-pickers and will remain MIT licensed and free forever.

How do I purchase a commercial license?

Visit the MUI Store to purchase a commercial license.

How do I migrate?

Follow the migration steps by updating the package name and change from a default export to a named export:

-import DatePicker from '@mui/lab/DatePicker';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';

-import DateRangePicker from '@mui/lab/DateRangePicker';
+import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';

-import { DatePicker, DateRangePicker } from '@mui/lab';
+import { DatePicker } from '@mui/x-date-pickers'; // DatePicker is also available in `@mui/x-date-pickers-pro`
+import { DateRangePicker } from '@mui/x-date-pickers-pro';

We have prepared a codemod to help you migrate your codebase from @mui/lab to @mui/x-date-pickers or @mui/x-date-pickers-pro:

npx @mui/codemod v5.0.0/date-pickers-moved-to-x <path>

Where is the date and time picker documentation?

You can find the documentation for the picker components in the MUI X docs.

What's next for the date and time pickers?

For now, @mui/x-date-pickers and @mui/x-date-pickers-pro are in alpha. Our next goal is to work on the stability and API consistency of these components to prepare a stable release.