Skip to content
Influence MUI X's 2024 roadmap! Participate in the latest Developer Survey
+

Date and Time Pickers - Getting Started

Get started with the Date and Time Pickers. Install the package, configure your application and start using the components.

Installation

Using your favorite package manager, install:

  • @mui/x-date-pickers for the free community version or @mui/x-date-pickers-pro for the commercial version.
  • The date library to manipulate the date.

The Date and Time Pickers package has a peer dependency on @mui/material. If you are not already using it in your project, you can install it with:

Please note that react and react-dom are peer dependencies too:

"peerDependencies": {
  "react": "^17.0.0 || ^18.0.0",
  "react-dom": "^17.0.0 || ^18.0.0"
},

Style engine

Material UI is using Emotion as a styling engine by default. If you want to use styled-components instead, run:

Take a look at the Styled engine guide for more information about how to configure styled-components as the style engine.

Setup your date library adapter

Before trying to render any component, you have to make sure that there is a LocalizationProvider upper in the React tree. This component receives your chosen date library's adapter (the doc uses AdapterDayjs which is based on dayjs) and makes it accessible to all the Date and Time Pickers component using React context.

Each demonstration in the documentation has its own LocalizationProvider wrapper. This is not a pattern to reproduce. The reason is to keep examples atomic and functional—especially when running in a CodeSandbox.

The general recommendation is to declare the LocalizationProvider once, wrapping your entire application. Then, you don't need to repeat the boilerplate code for every Date and Time Picker in your application.

import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'

function App({ children }) {
  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      {children}
    </LocalizationProvider>
  );
}

Render your first component

To make sure that everything is set up correctly, try rendering a simple DatePicker component:

Press Enter to start editing

What's next?

Continue to the next page and discover the components available and how to use them.