What is react-datepicker?
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.
What are react-datepicker's main functionalities?
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;
Other packages similar to react-datepicker
material-ui-pickers
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.
antd
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
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
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.
React Date Picker
A simple and reusable Datepicker component for React (Demo)
Installation
The package can be installed via NPM:
npm install react-datepicker --save
You’ll need to install React and Moment.js separately since those dependencies aren’t included in the package. Below is a simple example on 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).
var React = require('react');
var DatePicker = require('react-datepicker');
var moment = require('moment');
require('react-datepicker/dist/react-datepicker.css');
var Example = React.createClass({
displayName: 'Example',
getInitialState: function() {
return {
startDate: moment()
};
},
handleChange: function(date) {
this.setState({
startDate: date
});
},
render: function() {
return <DatePicker
selected={this.state.startDate}
onChange={this.handleChange} />;
}
});
Configuration
The most basic use of the DatePicker can be described with:
<DatePicker selected={this.state.date} onChange={this.handleChange} />
You can use onSelect
event handler which fires each time some calendar date has been selected
<DatePicker selected={this.state.date}
onSelect={this.handleSelect
onChange={this.handleChange
/>
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.
Localization
The date picker relies on moment.js internationalization to localize its display components. By default, the date picker will use the locale globally set in moment, which is English. Locales can be changed in the following ways:
- Globally by calling
moment.locale(lang)
- Picker-specific by providing the
locale
prop
Locales can be further configured in moment with various customization options.
As of version 0.23, the weekdays
and weekStart
DatePicker props have been removed. Instead, they can be configured with the weekdaysMin
and week.dow
moment locale customization options.
Compatibility
React
We're always trying to stay compatible with the latest version of React. We can't support all older versions of React, since React is still < 1.0 and introducing breaking changes every release.
Latest compatible versions:
- React 0.14 or newer: All above React-datepicker v0.13.0
- React 0.13: React-datepicker v0.13.0
- pre React 0.13: React-datepicker v0.6.2
Browser Support
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.
Local Development
The master
branch contains the latest version of the Datepicker component. To start your example app, you can run npm start
. This starts a simple webserver on http://localhost:8080.
You can run npm test
to execute the test suite and linters. To help you develop the component we’ve set up some tests that covers 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.
The examples
The examples are hosted within the docs folder and are ran in the simple add 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.
Accessibility
Keyboard support
- Left: Move to the previous day.
- Right: Move to the next day.
- Up: Move to the previous week.
- Down: Move to the next week.
- PgUp: Move to the previous month.
- PgDn: Move to the next month.
- Home: Move to the previous year.
- End: Move to the next year.
- Enter/Esc/Tab: close the calendar. (Enter & Esc calls preventDefautl)
License
Copyright (c) 2016 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.