Back to blog

MUI X expands its product line with advanced date and time picker components

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.

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.

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 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 which contains all the MIT licensed components
  • @mui/x-date-pickers-pro which 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?

To migrate, update the package name and change from a default export to a named export:

// before
import DatePicker from '@mui/lab/DatePicker';
import DateRangePicker from '@mui/lab/DateRangePicker';
import { DatePicker, DateRangePicker } from '@mui/lab';

// after
import DatePicker from '@mui/x-date-pickers/DatePicker';
import DateRangePicker from '@mui/x-date-pickers-pro/DateRangePicker';
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.