Skip to content
+

Date and Time Pickers - Getting started

Install the Date and Time Pickers package and set up your date library to start building.

Installation

Install the base package (which can either be the free Community version or the paid Pro version) along with a required third-party date library. The Pickers currently support Day.js, date-fns, Luxon, and Moment.js.

Choose your packages and manager through the toggles below, then run the commands as provided to install:

npm install @mui/x-date-pickers

npm install dayjs

Peer dependencies

Material UI

The Date and Time Pickers have a peer dependency on @mui/material. If you're not already using it, install it with the following command:

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

React

react and react-dom are also peer dependencies:

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

Date library adapter setup

To integrate your chosen date library with the Date and Time Pickers, you'll need to plug the corresponding adapter into a LocalizationProvider that wraps your Picker components.

Adapters are provided for each of the supported libraries, and all are exported by both @mui/x-date-pickers and @mui/x-date-pickers-pro—for example,AdapterDayjs, which is used throughout this documentation for Day.js integration:

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

LocalizationProvider

The LocalizationProvider component is exported by both @mui/x-date-pickers and @mui/x-date-pickers-pro:

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

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 confirm that everything is set up correctly, try rendering a basic Date Picker component:

Press Enter to start editing