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
Installation
Installing is really simple and can be done in two different ways:
- Install with Bower:
bower install react-date-picker
- Install with Bundler:
bundle install rails-assets-react-date-picker
Local Development
- Install Bower
npm install -g bower
- Install Grunt CLI
npm install -g grunt-cli
- Install Bower Packages
bower install
- Install packages
npm install
- Start a static webserver
python -m SimpleHTTPServer
- And visit
localhost:8000/example.html
to see the example.
To run tests, simply run grunt jest
.
License
Copyright (c) 2014 HackerOne Inc. and individual contributors. Licensed under MIT license, see LICENSE for the full license.