What is @mui/x-date-pickers-pro?
@mui/x-date-pickers-pro is a comprehensive set of date and time picker components for React applications. It is part of the MUI (Material-UI) library and provides advanced features for handling date and time inputs, including keyboard navigation, localization, and validation.
What are @mui/x-date-pickers-pro's main functionalities?
Date Picker
The Date Picker component allows users to select a date from a calendar view. It supports various customization options, including different date formats and localization.
import * as React from 'react';
import { DatePicker } from '@mui/x-date-pickers-pro/DatePicker';
import TextField from '@mui/material/TextField';
function BasicDatePicker() {
const [value, setValue] = React.useState(null);
return (
<DatePicker
label="Basic example"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
export default BasicDatePicker;
Date Time Picker
The Date Time Picker component combines date and time selection in a single interface. It is useful for applications that require precise date and time inputs.
import * as React from 'react';
import { DateTimePicker } from '@mui/x-date-pickers-pro/DateTimePicker';
import TextField from '@mui/material/TextField';
function BasicDateTimePicker() {
const [value, setValue] = React.useState(null);
return (
<DateTimePicker
label="DateTime picker"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
export default BasicDateTimePicker;
Time Picker
The Time Picker component allows users to select a specific time. It provides a user-friendly interface for time selection and supports various time formats.
import * as React from 'react';
import { TimePicker } from '@mui/x-date-pickers-pro/TimePicker';
import TextField from '@mui/material/TextField';
function BasicTimePicker() {
const [value, setValue] = React.useState(null);
return (
<TimePicker
label="Time picker"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(params) => <TextField {...params} />}
/>
);
}
export default BasicTimePicker;
Date Range Picker
The Date Range Picker component allows users to select a range of dates. It is useful for applications that require start and end date inputs, such as booking systems or reporting tools.
import * as React from 'react';
import { DateRangePicker } from '@mui/x-date-pickers-pro/DateRangePicker';
import TextField from '@mui/material/TextField';
function BasicDateRangePicker() {
const [value, setValue] = React.useState([null, null]);
return (
<DateRangePicker
startText="Start"
endText="End"
value={value}
onChange={(newValue) => {
setValue(newValue);
}}
renderInput={(startProps, endProps) => (
<>
<TextField {...startProps} />
<TextField {...endProps} />
</>
)}
/>
);
}
export default BasicDateRangePicker;
Other packages similar to @mui/x-date-pickers-pro
react-datepicker
react-datepicker is a simple and customizable date picker component for React. It offers basic date picking functionality and is easy to integrate into any React application. Compared to @mui/x-date-pickers-pro, it has fewer features and customization options but is lightweight and straightforward to use.
react-dates
react-dates is a date picker library developed by Airbnb. It provides a range of date picking components, including single date pickers and date range pickers. It offers advanced features like internationalization and custom styling. Compared to @mui/x-date-pickers-pro, it is more focused on date picking and does not include time picking functionalities.
rc-calendar
rc-calendar is a date and time picker component for React. It provides a comprehensive set of features for date and time selection, including support for different locales and custom date formats. Compared to @mui/x-date-pickers-pro, it offers similar functionalities but may require more configuration and customization.
@mui/x-date-pickers
This package is the community edition of the date picker component.
It's part of MUI X, an open core extension of MUI, with advanced components.
Installation
Install the package in your project directory with:
// with npm
npm install @mui/x-date-pickers
// with yarn
yarn add @mui/x-date-pickers
This component has three peer dependencies that you will need to install as well.
"peerDependencies": {
"@mui/material": "^5.0.0",
"react": "^17.0.0"
},
Documentation
The documentation