Skip to content
Edit this page

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.
yarn add @mui/x-date-pickers@next

// Install date library (if not already installed)
yarn add dayjs

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:

// with npm
npm install @mui/material @emotion/react @emotion/styled

// with yarn
yarn add @mui/material @emotion/react @emotion/styled

Please note that react >= 17.0.2 and react-dom >= 17.0.2 are peer dependencies.

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

// with npm
npm install @mui/material @mui/styled-engine-sc styled-components

// with yarn
yarn add @mui/material @mui/styled-engine-sc styled-components

Code setup

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 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.