react-datepicker
Advanced tools
The react-datepicker npm package is a simple and reusable date-picker component for React applications. It allows users to select dates and date ranges with ease and provides various customization options to suit different needs.
Basic date selection
This feature allows users to select a single date. The DatePicker component is imported and used within a React component, with state management to handle the selected date.
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function App() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={date => setStartDate(date)} />
);
}
export default App;Date range selection
This feature enables users to select a date range. The DatePicker component is configured to allow range selection, and the state is managed for both the start and end dates.
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function App() {
const [startDate, setStartDate] = useState(new Date());
const [endDate, setEndDate] = useState(new Date());
return (
<DatePicker
selectsRange={true}
startDate={startDate}
endDate={endDate}
onChange={dates => {
const [start, end] = dates;
setStartDate(start);
setEndDate(end);
}}
/>
);
}
export default App;Custom date format
This feature allows customization of the date format displayed in the date picker. The dateFormat prop is used to specify the desired date format.
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function App() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
selected={startDate}
onChange={date => setStartDate(date)}
dateFormat='yyyy/MM/dd'
/>
);
}
export default App;Inline calendar
This feature displays the date picker as an inline calendar, rather than a dropdown. The inline prop is set to true to enable this mode.
import React, { useState } from 'react';
import DatePicker from 'react-datepicker';
import 'react-datepicker/dist/react-datepicker.css';
function App() {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker
inline
selected={startDate}
onChange={date => setStartDate(date)}
/>
);
}
export default App;Material-UI Pickers provide date and time selection components using Material-UI. It offers a similar functionality to react-datepicker but with design and components that follow Material Design guidelines.
Ant Design (antd) is a UI design language and React UI library that includes a DatePicker component. It offers a comprehensive suite of UI components, including date pickers, with a design style that is different from react-datepicker.
React-dates is an Airbnb project that provides a date range picker component. It is focused on providing a date range selection with a clean and responsive interface, and it is more complex than react-datepicker.
React Day Picker is a flexible date picker component without any dependencies. It is lightweight and can be easily styled, offering a different approach to date picking compared to react-datepicker.
A simple and reusable Datepicker component for React (Demo)
The package can be installed via npm:
npm install react-datepicker --save
Or via yarn:
yarn add react-datepicker
You’ll need to install React and PropTypes separately since those dependencies aren’t included in the package. If you need to use a locale other than the default en-US, you'll also need to import that into your project from date-fns (see Localization section below). Below is a simple example of how to use the Datepicker in a React view. You will also need to require the CSS file from this package (or provide your own). The example below shows how to include the CSS from this package if your build system supports requiring CSS files (Webpack is one that does).
import React, { useState } from "react";
import DatePicker from "react-datepicker";
import "react-datepicker/dist/react-datepicker.css";
// CSS Modules, react-datepicker-cssmodules.css
// import 'react-datepicker/dist/react-datepicker-cssmodules.css';
const Example = () => {
const [startDate, setStartDate] = useState(new Date());
return (
<DatePicker selected={startDate} onChange={(date) => setStartDate(date)} />
);
};
The most basic use of the DatePicker can be described with:
<DatePicker selected={startdate} onChange={(date) => setStartDate(date)} />
You can use onSelect event handler which fires each time some calendar date has been selected
<DatePicker
selected={date}
onSelect={handleDateSelect} //when day is clicked
onChange={handleDateChange} //only when value has changed
/>
onClickOutside handler may be useful to close datepicker in inline mode
See here for a full list of props that may be passed to the component. Examples are given on the main website.
You can also include a time picker by adding the showTimeSelect prop
<DatePicker
selected={date}
onChange={handleDateChange}
showTimeSelect
dateFormat="Pp"
/>
Times will be displayed at 30-minute intervals by default (default configurable via timeIntervals prop)
More examples of how to use the time picker are given on the main website
The date picker relies on date-fns internationalization to localize its display components. By default, the date picker will use the locale globally set, which is English. Provided are 3 helper methods to set the locale:
import { registerLocale, setDefaultLocale } from "react-datepicker";
import { es } from 'date-fns/locale/es';
registerLocale('es', es)
<DatePicker
locale="es"
/>
Locales can be changed in the following way:
setDefaultLocale('es');We're always trying to stay compatible with the latest version of React. We can't support all older versions of React.
Latest compatible versions:
Up until version 1.8.0, this package was using Moment.js. Starting v2.0.0, we switched to using date-fns, which uses native Date objects, to reduce the size of the package. If you're switching from 1.8.0 to 2.0.0 or higher, please see the updated example above of check out the examples site for up to date examples.
The date picker is compatible with the latest versions of Chrome, Firefox, and IE10+.
Unfortunately, it is difficult to support legacy browsers while maintaining our ability to develop new features in the future. For IE9 support, it is known that the classlist polyfill is needed, but this may change or break at any point in the future.
The main branch contains the latest version of the Datepicker component.
To begin local development:
yarn link from project rootcd docs-site && yarn link react-datepickeryarn install from project rootyarn build from project rootyarn start from project rootThe last step starts documentation app as a simple webserver on http://localhost:3000.
You can run yarn test to execute the test suite and linters. To help you develop the component we’ve set up some tests that cover the basic functionality (can be found in /tests). Even though we’re big fans of testing, this only covers a small piece of the component. We highly recommend you add tests when you’re adding new functionality.
Please refer to CONTRIBUTING.md file for more details about getting set up.
The examples are hosted within the docs folder and are ran in the simple app that loads the Datepicker. To extend the examples with a new example, you can simply duplicate one of the existing examples and change the unique properties of your example.
Copyright (c) 2014-2024 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.
FAQs
A simple and reusable datepicker component for React
The npm package react-datepicker receives a total of 1,977,296 weekly downloads. As such, react-datepicker popularity was classified as popular.
We found that react-datepicker demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Security News
Attackers used a malicious npm package typosquatting a popular ESLint plugin to steal sensitive data, execute commands, and exploit developer systems.
Security News
The Ultralytics' PyPI Package was compromised four times in one weekend through GitHub Actions cache poisoning and failure to rotate previously compromised API tokens.
Security News
Research
Socket researchers found a malicious Maven package impersonating the legitimate ‘XZ for Java’ library, introducing a backdoor for remote code execution.