Skip to content
+

MUI X Date and Time Pickers

These react date picker and time picker components let users select date or time values.

Overview

DatePicker for date editing

TimePicker for time editing

DateTimePicker for date time editing

DateRangePicker for date range editing

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:

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 X 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:

Library Gzipped size
dayjs@1.11.5 6.77 kB
date-fns@2.29.3 19.39 kB
luxon@3.0.4 23.26 kB
moment@2.29.4 20.78 kB

What's next?

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