Date and Time Pickers

The Date and Time Pickers let the user select date and time values.

Overview

Community or Pro Plan?

The Date and Time Pickers are available in two packages:

• @mui/x-date-pickers, which is MIT licensed (free forever) and contains all the components to edit a date and/or a time.
• @mui/x-date-pickers-pro, which is commercially licensed and contains additional components to edit date and/or time ranges.

Date library

The Date and Time Pickers are focused on UI/UX and, like most other picker components available, require a third-party library to format, parse, and mutate dates.

MUI's components let you choose which library you prefer for this purpose. This gives you the flexibility to implement any date library you may already be using in your application, without adding an extra one to your bundle.

To achieve this, both @mui/x-date-pickers and @mui/x-date-pickers-pro export a set of adapters that expose the date manipulation libraries under a unified API.

Available libraries

The Date and Time Pickers currently support the following date libraries:

• Day.js
• date-fns
• Luxon
• Moment.js

Recommended library

If you are already using one of the libraries listed above in your application, then you can keep using it with the Date and Time Pickers as well. This will avoid bundling two libraries.

If you don't have your own requirements or don't manipulate dates outside of MUI components, then the recommendation is to use dayjs because it has the smallest impact on your application's bundle size.

Here is the weight added to your gzipped bundle size by each of these libraries when used inside the Date and Time Pickers:

What's next?

Continue to the next page and learn how to prepare your application for the Date and Time Pickers.